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
,如果真的需要,请使用stategetDefaultProps
并不是在在组件实例化时被调用的,而是在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);
}