浅谈使用React.setState需要注意的三点-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

前言

成都创新互联公司服务项目包括河东网站建设、河东网站制作、河东网页制作以及河东网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，河东网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到河东省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

正文

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

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

文档中也说明了当使用 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 (
   
    {this.props.values.map(value =>
      this.onSelect(value)}
     >
      {value}
      
    )} 
   
  )
 }
 
 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(