react render里面多次循环，怎么破 - 跟谁学
搜索你想学的科目、老师试试，例如“书法”搜索吉安
&&react render里面多次循环，怎么破render(){
if(this.state.loading){
let [header={},bodyHtml='']=[this.state.articleDetail.header];
bodyHtml=this.state.articleDetail.body.content.map(function (item1,index1) {
bodyHtml+={item1.firstTitle};
item1.firstTitleDes.map(function (item2,index2) {
bodyHtml+={item2.secondTitle};
item2.secondTitleDes.map(function (item3,index3) {
bodyHtml+={item3.describle};
bodyHtml+={item3.code};
return (bodyHtml);
{header.title}
发表于&&{header.date}&&|&&in&& {header.type}
{bodyHtml}
}cc_andyqianjiahao
感觉要么就是你把处理数据的这部分代码放到别的地方去做，要么就是重构逻辑，减少循环嵌套。
用 react 话，不是可以更好的组建化？你可以将每个循环中的结构单独提为一个组件：Item1，Item2，Item3当前组件中 map &Item1&&Item1& 中 map &Item2&&Item2& 中 map &Item3&。
if(this.state.loading){
return &Loading/&;
let [header={},bodyHtml=[]]=[this.state.articleDetail.header];
this.state.articleDetail.body.content.forEach(function (item1,index1) {
bodyHtml.push(&h4 key={index1}&{item1.firstTitle}&/h4&);
item1.firstTitleDes.forEach(function (item2,index2) {
bodyHtml.push(&h6 key={''+index1+index2}&{item2.secondTitle}&/h6&);
item2.secondTitleDes.forEach(function (item3,index3) {
bodyHtml.push(
&div key={''+index1+index2+index3}&
&p&{item3.describle}&/p&
&pre&&code className={item3.codeType}&{item3.code}&/code&&/pre&
&div className="container"&
&header className="aticle-header"&
&h2&{header.title}&/h2&
&p&发表于&&{header.date}&&|&&in&& &Link to="/"&{header.type}&/Link&&/p&
&article className="aticle-body"&{bodyHtml}&/article&
冲这个嵌套的程度，我觉得你应该改变结构了，你现在走的路会让你更痛苦。
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心说一说 React 和 Redux 你知道或者不知道的一些事情-android100学习网
说一说 React 和 Redux 你知道或者不知道的一些事情
本文介绍一下自己在使用React和Redux过程中的一些思考，主要面向初学者。
1. 为什么要有redux
传统前端开发中，把模板和功能逻辑分开作为一种最...
本文介绍一下自己在使用React和Redux过程中的一些思考，主要面向初学者。
1. 为什么要有redux
传统前端开发中，把模板和功能逻辑分开作为一种最佳实践，React采用了不同的思路，通过组件把模板和逻辑组合在一起。但是React也并不是一个完整的组件化框架，其组件化只是主要集中在展示层面，如果要构建复杂的应用，在React component中放置太多的逻辑代码，不仅组件化的初衷复用性会降低，从代码维护的角度看也不合理。
Flux是Facebook提出的一种前端架构模式，通过Flux的数据流模型可以非常优雅地处理应用中的数据流动，配合其他中间件使用可以处理复杂应用中的逻辑行为，从而提高代码的复用性和维护性。其中Redux是所有Flux具体实现中的一个佼佼者。
2. react redux工程化
这里说一下在react、redux开发中可能会用到的一些方便开发的工具和值得研究的第三方库。
react-redux
react-redux通过Provider和connect两个接口简化了react component与redux的绑定，几乎是必用的一个库。
redux devtools
可以使用chrome的Redux DevTools插件，redux devtools功能非常强大，可以查看store state和action的内容，而且是可以查看所有阶段的store中的数据，甚至撤销或者重新执行action，站在绝对的上帝视角，可以帮助我们快速定位逻辑上的问题。
react-addons-perf
react-addons-perf是一个性能分析工具，可以打印react component的渲染时间，还可以分析组件渲染过程中浪费的时间，即执行了render方法，而没有在dom上更新的地方，从而发现component中可以优化的环节。
react-addons-update
react-addons-update可以方便地创建不可变数据。我们知道为了性能优化中会使用shouldComponentUpdate方法来避免render无意义调用，但是shouldComponentUpdate本身的执行也不能过于复杂，否则反而是增加了执行时间，所以shouldComponentUpdate在对比oldprops和nextprops时一般使用浅对比（shallow compare）。这时如果是对可变对象进行浅比较，结果自然是不准确的，因此需要使用不可变对象，react-addons-update正可以满足这种需求。
redux-logger
可以在console中输出每一个action dispatch后state的变化，是代码调试的好帮手。
redux-saga
通过使用generator可以优雅地处理异步过程，并且可测试性强。
3. react性能优化的建议
网上已经有很多react性能优化的文章，个人觉得性能优化本身是一个博弈的过程，在代码可读性、维护性与运行性能之间的博弈，很多时候性能优化牺牲了代码的可读性，因此要在合适的时间，在需求基本完成时再进行优化，并且优化中要着眼于性能的瓶颈，没有必要深挖每一个细节，破坏代码本身可读性。
4. React使用中的一些博弈
其实React的出现本身就一个博弈的结果，模板和逻辑的分离还是组合的一个博弈结果，React采用组件的方式把传统开发中的模板和逻辑放置在了一起。在选用React之前需要考虑下是否适合采用React。
shouldComponentUpdate
shouldComponentUpdate的加入是为了避免render方法的无效重复执行，但是如果shouldComponentUpdate函数本身会执行比较复杂的对比，那么加入shouldComponentUpdate得不偿失.
redux 博弈
在react中加入redux之后，会尽量设计"纯"component （即对于传入一定 props一定可以输出确定的结果），组件间、甚至组件内部的状态变化都要通过action来实现。但有时使用组件内部的state反而是一种最简便快捷的方式。
组件拆分的博弈
组件拆分并不是颗粒越小越好，找到一个可以被复用的平衡点即可，拆分过细反而增加了代码的复杂度。
Facebook最近开源了litho，其设计思路与react如出一辙。对于Android开发者来说，也是一个颠覆性的创新。同时litho提到的异步布局、View复用对于开发者来说也具有很大的吸引力。
为了督促自己更新博客，先在这里立个flag。
来自：https://juejin.im/post/590fb6fea0bb9f通常在js中增加是怎么做的呢？用document.getElementById(". . .") 获得DOM元素后，然后用appendChild()实现函数添加
那么在react中添加元素是否也要采取这样的方式呢？当然不是那样的。
废话不多说.
这里调用组件LeftPanel
&LeftPanel content={[{"title":"工程研发部门","item":"Mac 开发","checked":"false","number":9},
{"title":"工程研发部门","item":"iOS App 测试工程师","checked":"false","number":17},
{"title":"工程研发部门","item":" 远程控制工程师","checked":"false","number":61},
{"title":"工程研发部门","item":"Web 前端工程师","checked":"false","number":31},
{"title":"工程研发部门","item":"Android 开发工程师","checked":"false","number":2},
{"title":"设计部门","item":"","checked":"false","number":47},
{"title":"产品设计部门","item":"ID/工业设计师","checked":"false","number":39},
{"title":"产品设计部门","item":"视觉设计师/GUI界面设计师","checked":"false","number":42},
{"title":"产品设计部门","item":"平面设计师","checked":"false","number":8}
以上是我定义的一个组件LeftPanel, 属性content是一个数组.
{/*存放标题*/}
var titles = [];
{/*类别归类对象*/}
var itemsSort = {};
this.props.content.forEach(function(items){
{/*判断对象是否存在*/}
if(!itemsSort[items.title]){
titles.push(items.title);
itemsSort[items.title] = [];
itemsSort[items.title].push(items);
itemsSort[items.title].push(items);
var chooseNode = titles.map(function(title){
&SelectionTitle content={title} item={itemsSort[title]} checked={this.state.checked}/&
}.bind(this));
以上的代码在定义了chooseNode的一个组件，这就是核心的内容了，首先是map()函数的特性，那就是它可以有返回值，使得自定义的组件或者DOM标签添加到(注意这里不是替代，而是添加)变量chooseNode。其次注意的map是用于遍历数组,这个时候choose就可以被赋值为DOM元素了
OK,完成之后你可以在render(){}中的return中这样写{chooseNode}，实例代码如下
&div id="leftPanel" ref="leftPanel" style={styles.wrapBackground}&
&div style={styles.wrap}&
&span style={styles.title}&招聘职位&/span&
&button style={styles.button} onClick={this.handleClick}&清空&/button&
{chooseNode}
下面是全部的代码的地址：> 博客详情
摘要: 最近在学习React，这篇主要讲JSX，是从官方文档总结而得
####什么是JSX？
在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个**语法糖**，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。
var MyComponent = React.createClass({/*...*/});
var myElement = &MyComponent someProperty={true} /&;
React.render(myElement, document.body);
一个XML标签，比如`&MyComponent someProperty={true} /&`会被JSX转换工具转换成什么呢？
var Nav = React.createClass({/*...*/});
var app = &Nav color="blue"&&Profile&click&/Profile&&/Nav&;
会被转化为：
var Nav = React.createClass({/*...*/});
var app = React.createElement(
{color:"blue"},
React.createElement(Profile, null, "click")
那么也就是说，我们写一个XML标签，实质上就是在调用`React.createElement`这个方法，并返回一个`ReactElement`对象。
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个`ReactClass`类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。
####JSX转化器
要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在`script`标签中要加上`type="text/jsx"`，并引入`JSXTransformer.js`文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用`npm`**全局安装**`react-tools`：
npm install -g react-tools
并使用命令行工具转化即可（具体用法可以参考`jsx -h`）：
jsx src/ build/
如果使用自动化工具，比如`gulp`的话，可以使用相应插件`gulp-react`。
####使用HTML标签
要创建一个HTML标准中存在的元素，直接像写HTML代码一样即可：
var myDivElement = &div className="foo" /&;
React.render(myDivElement, document.body);
不过需要注意的是`class`和`for`这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用`className`和`htmlFor`。
还有一点是，在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加`data-`前缀。
&div data-custom-attribute="foo" /&
####命名空间式组件
比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：
var Form = MyFormC
var App = (
&Form.Row&
&Form.Label /&
&Form.Input /&
&/Form.Row&
这样你只需将子组件的`ReactClass`作为其父组件的属性：
var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });
而创建子元素可以直接交给JSX转化器：
var App = (
React.createElement(Form, null,
React.createElement(Form.Row, null,
React.createElement(Form.Label, null),
React.createElement(Form.Input, null)
*该功能需要0.11及以上版本*
####Javascript表达式
在JSX语法中写Javascript表达式只需要用`{}`即可，比如下面这个使用三目运算符的例子：
// Input (JSX):
var content = &Container&{window.isLoggedIn ? &Nav /& : &Login /&}&/Container&;
// Output (JS):
var content = React.createElement(
Container,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
不过要注意的是，JSX语法只是语法糖，它的背后是调用`ReactElement`的构造方法`React.createElement`的，所以类似这样的写法是不可以的：
// This JSX:
&div id={if (condition) { 'msg' }}&Hello World!&/div&
// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：
if (condition) &div id='msg'&Hello World!&/div&
else &div&Hello World!&/div&
####传播属性（Spread Attributes）
在JSX中，可以使用`...`运算符，表示将一个对象的键值对与`ReactElement`的`props`属性合并，这个`...`运算符的实现类似于ES6 Array中的`...`运算符的特性。
var props = { foo: x, bar: y };
var component = &Component { ...props } /&;
这样就相当于：
var component = &Component foo={x} bar={y} /&
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
var props = { foo: 'default' };
var component = &Component {...props} foo={'override'} /&;
console.log(component.props.foo); // 'override'
####参考资料（可能无法直接打开链接）
- [JSX in Depth](http://facebook.github.io/react/docs/jsx-in-depth.html)
- [JSX Spread Attributes](http://facebook.github.io/react/docs/jsx-spread.html)
- [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)
- [JSX Gotchas](http://facebook.github.io/react/docs/jsx-gotchas.html)
人打赏支持
码字总数 8927
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥2463人阅读
动画基础（3）
最近，在项目中用到了一个功能，就是进入一个页面，进行数字动态的滚动，当时只顾着去想一些动画的效果了，所以花一点时间，后来自己上网找了一下，发现这个方法挺好的。
1.在一个设定的时间间隔内进行循环的操作
componentWillReceiveProps(next){
if(next.total!==0 && !this.timer) {
this.timer = setInterval(
let val = this.state.start + parseInt(next.total/21);
if (val &= next.total) {
val = next.
clearInterval(this.timer);
this.timer =
this.setState({
start: val,
2.定时操作（在某一段时间之后执行某个方法）
componentWillReceiveProps(next){
if(next.total!==0 && !this.timer) {
this.timer = setTimeout(
alert(‘隔了1000毫秒执行了这个提示！’);
//不用的是时候将其解绑
componentWillUnmount() {
this.timer && clearTimeout(this.timer);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7036次
排名：千里之外
原创：36篇
(10)(3)(1)(1)(3)(3)(4)(5)(7)}