React学习总结（二）

React总结二

（一）堆栈溢出错误

• 在react return函数中不能使用setState函数，因为这个函数设置了state后会立即更新组件，更新组件又会重新调用return，形成死循环。

（二）父子组件交流

• 父子组件交流过程中，用父组件的 state、props、参数（属性、函数）通过子组件的 props 来传入属性或者函数。

（三）ref

• 在 react 中获得真实DOM节点使用 ref

• 方法：在节点中添加 ref 属性，例以 myIn 为名称，

    ref={(myIn) => {this.myIn = myIn;}}
  

• 调用时：

    this.myIn
  

• React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点，你可以给某个 JSX 元素加上 ref属性。能不用 ref 就不用

（四）状态提升

• 定义：当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。React.js 把这种行为叫做“状态提升”。

• 对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。

（五）挂载阶段的组件生命周期

• 定义：我们把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载

• 顺序：

    -> constructor()
    -> componentWillMount()
    -> render()
    // 然后构造 DOM 元素插入页面
    -> componentDidMount()
    // ...
    // 即将从页面中删除
    -> componentWillUnmount()
    // 从页面中删除
  

• 解释：componentWillMount 和 componentDidMount 都是可以像 render 方法一样自定义在组件的内部。挂载的时候，React.js 会在组件的 render 之前调用 componentWillMount，在 DOM 元素塞入页面以后调用 componentDidMount。

• 使用：一般会把组件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。

• componentDidMount 的使用：一般来说，有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在 componentDidMount 当中。

• setState 只能在已经挂载或者正在挂载的组件上调用

（六）更新阶段的组件生命周期：

• shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。

• componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。

• componentWillUpdate()：组件开始重新渲染之前调用。

• componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。

（七）props.children 和容器类组件

• {this.props.children} or {this.props.children[0]}、{this.props.children[1]}

（八）CSS属性

• 在 React.js 中你需要把 CSS 属性变成一个对象再传给元素（原来 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名）：

    <h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1>
  

（九）dangerouslySetHTML 和 style 属性

• 出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，
  React.js 提供了一个属性 dangerouslySetInnerHTML，可以让我们设置动态设置元素的 innerHTML：

    class Editor extends Component {
      constructor() {
        super()
        this.state = {
          content: '<h1>React.js 小书</h1>'
        }
      }
    
      render () {
        return (
          <div
            className='editor-wrapper'
            dangerouslySetInnerHTML={{__html: this.state.content}} />
        )
      }
    }
  

（十）写在大括号中的语句

• 有时候，需要利用state更新组件状态，可以通过下面这种方式

    const records = this.state.metas;
    // [{descripe,layername,flag,index},...]
    const todoButtons = records.map((record, index) =>
        <button
            onClick={this.handleClick}
            value={record.descripe}
            className={record.flag ? styles.btnSelected : styles.btn}
            key={index}
            name={record.index.toString()}
        >
            {record.descripe}
        </button>
    );