- Article -

REACT学习的一些细节

分类于 前端开发 标签 REACT基础 发表于2019-09-11 20:00

记录一些REACT容易忽略的小细节

易于维护组件的设计要素

关于setState()

使用setState()更新State可能是异步的,出于性能考虑,React 可能会把多个 setState() 调用合并成一个调用。 因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来更新下一个状态。即:调用了setState()之后,不要以为State更新了,马上用它来参与计算。

某些情况没必要使用state

即react哲学的第三步,确定 UI state 的最小(且完整)表示

DRY: Don’t Repeat Yourself

组件的生命周期

render

React组件的父类React.component除了render之外的方法都有默认实现,因此,一个React必须要有render函数,如果这个组件不想渲染任何Dom元素,可以返回null或者false。

componentWillReceiveProps

componentWillReceiveProps并不是 props 发生改变的时候才会被调用,实际上,只要是父组件的 render 函数被调用,在 rende函数里面被渲染的子组件就会经历更新过程,不管父组件传给子组件的 props 有没有改变,都会触发子组件的 componentWill-ReceiveProps函数。 注意,通过 this.setState 方法触发的更新过程不会调用这个函数,这是因为这个函数适合根据新的 props 值(也就是参数 nextProps )来计算出是不是要更新内部状态 state。更新组件内部状态的方法是this.setState ,如果 this.setState 的调用导致 componentWillReceiveProps 再一次被调用,那就是一个死循环了。

在JSX中最好不要直接把匿名函数赋值给onClick方法

虽然这样看起来非常简洁而且方便,其实并不是值得提倡的方法,因为每次渲染都会创造一个新的匿名方法对象,而且有可能引发子组件不必要的重新渲染。像下面这样:

render() {
   return (
      <div style={style}>
         <button onClick={ () => this.forceUpdate() }>
            Click me to repaint!
         </button>
      </div>
   );
}

shouldComponentUpdate(nextProps,nextState)

render 和 shouldComponentUpdate 函数也是 React 生命周期函数中唯二两个要求有返回结果的函数。render 函数的返回结果将用于构造 DOM 对象,而 shouldComponent-Update 函数返回一个布尔值,告诉 React 库这个组件在这次更新过程中是否要继续。

componentWillUpdate 和 componentDidUpdate

如果组件的 shouldComponentUpdate 函数返回 true,React 接下来就会依次调用对应组件的 componentWillUpdate 、render 和 componentDidUpdate 函数。