React初学者应牢记这几点，针对自身的部分总结

一、编写代码要以数据驱动

往往在刚接触react编程的时候，我们需要花一定的时间摆脱直接操作dom的这种思维。要记住，引起view视图改变的一定是数据发生了改变，我们一般只需要操作state数据即可，例如：

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      displayStatus: true
    }
  }

  delete = () => {
    this.setState({
      displayStatus: false
    })
  }

  render() {
    const {
      displayStatus
    } = this.state
    return (
      <div className="App">
        <button onClick={this.delete}>删除</button>
        {displayStatus&&<p>我是要被删除的dom</p>  
      </div>
    );
  }
}

二、this.setState是异步操作

刚刚接触react项目的时候，没有去认真的了解过this.stetState。通常在请求接口之后，我们需要通过返回值更新state的数据，如下所示，当时不知道this.setState是异步执行的，将返回值赋值给state数据之后，直接用this.state.xxx的形式作为参数传递......这就导致了一个很严重的问题，this.stetState是异步的，这个时候this.state.xxx的值很有可能并没有更新成为最新的，所以这个时候的参数就有可能出错。
碰到这种情况，要么直接用接口返回值作为参数传递，要么利用this.stetState的回调函数，在回调函数中进行操作。

 this.state = {
     count: 1
 }
componentDidMount() {
    $.ajax({
      type: "method",
      url: "url",
      data: "data",
      dataType: "dataType",
      success: (res) => {
      // res = 2
        this.setState({
          count: res
        })
        this.getList(this.state.count) //this.state.count其实还是1
      }
    });
  }

  getList(type){
    console.log(type) // 1
  }
==================================================================================
//正确写法：
 this.setState({
    count: res
 })
 this.getList(res) 
//或者
this.setState({
    count: res
 },() => {
  this.getList(this.state.count)
})

三、组件化、模块化

将一些有共同特征的结构模块单独提出来，秉承复用的想法，短时间来看可能增加了时间成本，其实从长远来看总体是节约了成本，代码能够复用，降低了后面的开发成本，同时也便于维护，不单单是组件可以提出来，函数一样可以，单独拎出来放在一个js文件里，需要使用的时候import即可，增强了代码的可读性，更加简洁。

四、暂时想不到

五、算了不想了