您的位置:首页 > Web前端 > React

React组件及生命周期

2017-11-30 14:37 375 查看
1.React.createClass()用来创建组件

render() (必须的): 调用时会检测this.props和this.state 返回一个单子级组件(可以是虚拟DOM组件如<div /> 也可以是自定义的复合组件)
也可以返回null或者false来表明不 需要渲染任何东西

      (纯粹的):函数不修改组件state 每次调用返回相同的结果 不读写DOM信息  也不和浏览器交互  可以在componentDidMount()或者其他生命周期方法中进行交互

保持render()纯粹可以使服务器端渲染更加切实可行  使组件更容易被理解

getInitialState() : 在组件挂载之前调用一次 返回值将会作为this.state的初始值

getDefaultProps() : 在组件类创建的时候调用一次 然后返回值被缓存下来 如果父组件没有指定props中的某个键 则自处返回的对象中的相应属性将会合并到this.props       
  (使用in检测属性)

propTypes : 对象允许验证传入到组件props

mixins : 数组允许使用混合来在多个组件之间共享行为

statics : 对象允许你定义静态的方法 这些静态的方法可以在组件类中调用

displayName : 字符串用于输出调试信息

2.组件API

setState(object nextState[,function callback]) :  合并nextState和当前state 事件处理函数中和请求回调函数中触发UI更新的主要方法  也支持可选的回调函数 在setState执
      行完毕并且组件重新渲染完成之后调用

replaceState(object nextState[,function callback])  :删除之前所有已存在的state键 这些键都不在nextState中

forceUpdate([function callback])  :将会导致render()方法在相应的组件上被调用 并且子级组件也会调用自己的render() 但是如果标记改变了 那么React仅会更新DOM

getDOMNode()  :如果组件已经挂载到DOM上 该方法返回相应的本地浏览器DOM元素 当render返回null或者false的时候 this.getDOMNode()返回null

isMounted()  :判断组件是否渲染到DOM中

setProps(object nextProps[,function callback])  :调用setProps()来改变组件的属性,触发一次重新渲染 可以传递一个回调函数 将在setProps完成并且组件重新渲染完成之
后调用

replaceProps(object nextProps[,function callback])  :删除所有已存在的props 而不是合并新旧两个props对象

3.生命周期方法

挂载:

componentWillMount() : 服务器端和客户端都只调用一次 在初始化渲染执行之前立即调用  

componentDidMount() : 在初始化渲染执行之后立刻调用一次 仅客户端有效(服务器端不会调用) 在生命周期的这个时间点 组件拥有一个DOM展现  

  通过this.getDOMNode()来获取相应DOM节点  可以在这个方法中使用setTimeout或setInterval来设置定时器 或者发送AJAX请求

更新:

componentWillReceiveProps(object nextProps)  : 在组件接收到新的props的时候调用 在初始化渲染的时候 不会被调用

shouldComponentUpdate(object nextProps,object nextState) : 在接收到新的props或state,将要渲染之前调用 在初始化渲染的时候不会被调用 在使用forceUpdate方法的
       时候也不会调用

componentWillUpdate(object nextProps,object nextState)  :在接收到新的props或者state之前立即调用 在初始化渲染的时候该方法不会被调用 使用该方法在一些更新之
 前的准备工作

componentDidUpdate(Object prevProps,object prevState) : 在组件的更新已经同步到DOM中之后立即被调用  该方法不会在初始化渲染的时候调用 使用该方法可以在组
  件更新之后操作DOM元素

移除:

componentWillUnmount()  :在组件从DOM中移除的时候立即被调用 在该方法中执行任何必要的清理  比如无效的定时器或者清除在componentDidMount中创建的DOM元
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javaScript