关于在render的中的方法中又触发render的错误

@ckinmind 2017-03-16 07:41:49发表于 ckinmind/ReactCollect 重要

背景:

在用mobx的过程中(问题问题不是单指mobx的,普遍性问题),在render的rentrn中有一个立即执行的方法,用于根据条件获取对应的组件,但是在获取组件的过程中,多一个一个操作,这个操作会导致再次触发更新,这个时候报错了, 错误如下

Warning: forceUpdate(...): Cannot update during an existing state transition 
(such as within `render` or another component's constructor). 
Render methods should be a pure function of props and state; 
constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

其中有一句很重要的话:

Render methods should be a pure function of props and state
即:render中的方法必须是一个纯函数,固定输入有固定输出,不应该再有触发别的副作用(比如可能会导致再次render)的操作

案例代码如下:

 ...

getInfo = ()=> {
     
   // 这里有一个操作,这个操作会导致视图更新,从而导致报错
   return <div>...</div>;
}

render(){
    return (
              <div>
                ....
               {this.getInfo()}
              </div>
    );
}
  

思考: 这个和redux中要求的reducer必须是纯函数有联系吗,这样的要求是否是为了防止触发视图渲染的死循环