react学习

react的生命周期方法执行顺序:https://blog.csdn.net/weixin_41014370/article/details/81977200

componentWillReceiveProps
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用

Store
Store就是把它们联系到一起的对象。
维持应用的state:提供getState( )方法获取state;
提供dispatch(action)方法更新state;
通过subscribe(listener)注册监听器;
通过subscribe(listener)返回的函数注销监听器

提供dispatch(action)方法更新state;


更新render()
1.this.setState() 在事件处理函数中和请求回调函数中触发 UI 更新的主要方法

一般情况下setState() 总是触发一次重绘,除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。

如果使用可变的对象,但是又不能在 shouldComponentUpdate() 中实现这种逻辑,仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

react强制重新渲染

 2.this.forceUpdate() 【较为常用,但是不推荐】

如果 render() 方法从 this.props 或者 this.state 之外的地方读取数据,你需要通过调用 forceUpdate() 告诉 React 什么时候需要再次运行 render()。如果直接改变了 this.state,也需要调用 forceUpdate()。

调用 forceUpdate() 将会导致 render() 方法在相应的组件上被调用,并且子级组件也会调用自己的 render(),但是如果标记改变了,那么 React 仅会更新 DOM。通常情况下,应该尽量避免所有使用 forceUpdate() 的情况,在 render() 中仅从 this.props 和 this.state 中读取数据。这会使应用大大简化,并且更加高效。

3. this.setProps()   【不常用】

同一个节点上再次调用 React.render() 来更新根组件是首选的方式,也可以调用 setProps() 来改变组件的属性,触发一次重新渲染。

但是!此方法仅在根组件上面调用。也就是说,仅在直接传给 React.render() 的组件上可用,在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps(),不要利用响应式更新,而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。

说的通俗一点:父组件不能直接修改 prop属性,只能父类在使用传入的时候进行设置。

posted @ 2018-10-17 17:44  Chanhxy  阅读(111)  评论(0)    收藏  举报