React混淆知识摘录

2019独角兽企业重金招聘Python工程师标准>>>

react是Facebook内部的一个JavaScript类库，已于2013年开源。

---

###react的生命周期 一个实例初次被创建时所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同，当你首次使用一个组件类时，你会看到下面这些方法依次被调用：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

对于该组件的所有后续应用，你将会看到下面的方法依次被调用。注意，getDefaultProps方法已经不在列表中了。

• getInitialState
• componentWillMount
• render
• componentDidMount

其中，render方法返回的结果不是真正的DOM，而是一个虚拟的表现，React随后会把它和真实的DOM做对比，来判断是否有必要做出修改

而当render方法成功调用并且真实的DOM已经被渲染之后，你可以在componentDidMount内部通过this.getDOMNode()方法访问到底层的DOM节点，但是不要试图在render方法中这样做。因为在render方法完成并且React执行更新之前，底层的DOM节点可能不是最新的

通过调用shouldComponentUpdate方法在组件渲染时可以进行精确优化，但是这个方法是非必须的，并且大多数情况下没必要在开发中使用它。

在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或者添加的事件监听器

###数据流 props就是properties的缩写，你可以使用它把任意类型的数据传递给组件，可以在挂载的时候设置它的props或者通过调用组件实例的setProps方法（很少这样用）来设置props

  var surveys = [{name:'sunshine'}];
  var lists = React.render(
    <Lists/>
    document.querySelector('body')
)
list.setProps({surveys:surveys});

但是注意一点，你只能在子组件上或者在组件树外调用setProps,千万不要调用this.setProps或者直接修改this.props，如果真的需要，请使用state getDefaultProps并不是在在组件实例化时被调用的，而是在React.createClass调用时就被调用了，返回值会被缓存起来，也就是说不能在getDefaultProps中使用任何特定的实例数据 千万不能直接修改this.state,永远记得要通过this.setState方法修改

###事件处理 更新组件状态有两种方案：组件的setState方法和replaceState,replaceState用一个全新的state对象完整地替换掉原有的state。使用不可变数据结构来表示状态时，这种方式很有效，不过很少应用于其他场景下。更多的情况会使用setState，它仅仅是把传入的对象合并到已有的state对象

通常有一个事件对象传入到React的事件处理函数中，类似原生Javascript事件监听器的写法.

  handleComplete:function(event){
     this.callMethodOnProps('onCompleted',event.target.value);
  }

转载于:https://my.oschina.net/sunshinewyf/blog/756517