React（二）

状态提升

  即：组件之间共享的状态交给最近的公共父结点保管，组件通过props获取到状态
 

组件生命周期

挂载阶段

• 组件自身初始化工作在construct中实现
• 组件挂载开始之前即在组件render之前调用 componentWillMount，实现组件的启动
• 组件挂载完成以后即在DOM元素塞入页面以后调用componentDidMount，实现对于依赖DOM的组件启动
• 组件对应的DOM元素从页面中删除之前调用componentWillUnmount，实现页面销毁之后的数据清理

更新阶段

• shouldComponentUpdate(nextProps,nextState)控制组件是否重新渲染（false则不会重新渲染）
• componentWillReceiverProps(nextProps),组件接受到父节点的props之前调用
• componentWillUpdate(),组件开始重新渲染
• componentDidUpdate()，组件重新渲染完成之后再调用
   

ref属性

  获取已经挂载的DOM节点

render(){
  return (
  <input ref = {(input)=>this.input = input} />
  )
}

   再挂载完成之后调用ref属性中的函数（将DOM元素设置为组件实例的一个属性），通过this.input获取到DOM元素
组件也可以设置ref属性
 

props.children使用

• 组件可以像普通HTML编写内嵌结构

ReactDOM.render (
    <Title>
        <h1>大家好</h1>
    </Title>
    ……
  )

  在组件内部通过props.children获取到

render(){
  return(
    <div>{this.props.children}<div>
  )
}

 

dangerouslySetHTML

• 设置动态HTML

constructor(){
  super();
  this.state= {
    content:'<div>我最可爱</div>'
  }
}
render(){
  return(
      <div dangerouslySetInnerHTML = {{__html:this.state.content}}></div>
  )
}

 

style属性

• 组件内部设置style时应将css属性变成对象再传给元素

style = {{fontSize:10px}}

css样式名应转换成驼峰式
 

组件参数验证

• PropTypes

static propTypes = {
  comment:PropsType.object
}
//规定传入的comment类型为object

 
参考资料：http://huziketang.mangojuice.top/books/react/lesson1