React混淆知识摘录

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


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

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

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

  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

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

而当render方法成功调用而且真实的DOM已经被渲染以后,你能够在componentDidMount内部经过this.getDOMNode()方法访问到底层的DOM节点,可是不要试图在render方法中这样作。由于在render方法完成而且React执行更新以前,底层的DOM节点可能不是最新的数据结构

经过调用shouldComponentUpdate方法在组件渲染时能够进行精确优化,可是这个方法是非必须的,而且大多数状况下不必在开发中使用它。函数

componentDidMount方法中添加的全部任务都须要在该方法中撤销,好比建立的定时器或者添加的事件监听器优化

###数据流 props就是properties的缩写,你可使用它把任意类型的数据传递给组件,能够在挂载的时候设置它的props或者经过调用组件实例的setProps方法(不多这样用)来设置propsthis

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方法修改code

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

一般有一个事件对象传入到React的事件处理函数中,相似原生Javascript事件监听器的写法.

handleComplete:function(event){
     this.callMethodOnProps('onCompleted',event.target.value);
  }
相关文章
相关标签/搜索