浅谈使用React.setState需要注意的三点

日期：2020-05-11 栏目：程序人生浏览：次

前言

这篇文章原标题是 3 Reasons why I stopped using React.setState ，但是我对原文作者提出的论点不是很感冒，但是作者提出的三点对 React 新手来说是很容易忽略的地方，所以我在这里只提出部分内容，而且把标题改为使用React.setState需要注意的三点。

正文

对 React 新手来说，使用 setState 是一件很复杂的事情。即使是熟练的 React 开发，也很有可能因为 React 的一些机制而产生一些bug，比如下面这个例子：

文档中也说明了当使用 setState 的时候，需要注意什么问题：

注意：

绝对不要直接改变 this.state ，因为之后调用 setState() 可能会替换掉你做的改

变。把 this.state 当做是不可变的。

setState() 不会立刻改变 this.state ，而是创建一个即将处理的 state 转变。在调用该方法之后访问 this.state 可能会返回现有的值。

对 setState 的调用没有任何同步性的保证，并且调用可能会为了性能收益批量执行。

setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果可变对象被使用了，但又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

总结出来，当使用 setState 的时候，有三个问题需要注意:

1. setState是异步的(译者注：不保证同步的)

很多开发刚开始没有注意到 setState 是异步的。如果你修改一些 state ，然后直接查看它，你会看到之前的 state 。这是 setState 中最容易出错的地方。 setState 这个词看起来并不像是异步的，所以如果你不假思索的用它，可能会造成 bugs 。下面这个例子很好的展示了这个问题：

class Select extends React.Component {
 constructor(props, context) {
  super(props, context)
  this.state = {
   selection: props.values[0]
  };
 }
 
 render() {
  return (
   <ul onKeyDown={this.onKeyDown} tabIndex={0}>
    {this.props.values.map(value =>
     <li
      className={value === this.state.selection ? 'selected' : ''}
      key={value}
      onClick={() => this.onSelect(value)}
     >
      {value}
     </li> 
    )} 
   </ul>
  )
 }
 
 onSelect(value) {
  this.setState({
   selection: value
  })
  this.fireOnSelect()
 }

 onKeyDown = (e) => {
  const {values} = this.props
  const idx = values.indexOf(this.state.selection)
  if (e.keyCode === 38 && idx > 0) { /* up */
   this.setState({
    selection: values[idx - 1]
   })
  } else if (e.keyCode === 40 && idx < values.length -1) { /* down */
   this.setState({
    selection: values[idx + 1]
   }) 
  }
  this.fireOnSelect()
 }
  
 fireOnSelect() {
  if (typeof this.props.onSelect === "function")
   this.props.onSelect(this.state.selection) /* not what you expected..*/
 }
}

ReactDOM.render(
 <Select 
  values={["State.", "Should.", "Be.", "Synchronous."]} 
  onSelect={value => console.log(value)}
 />,
 document.getElementById("app")
)

转载注明出处：https://www.heiqu.com/66.html

浅谈使用React.setState需要注意的三点

相关推荐