老夫当年也是神一般的少年
老夫当年也是神一般的少年

React学习笔记（二）

条件渲染

  1. if、&&、||、三元表达式

列表 & Keys

  1. 循环列表时需要给每一项加上独一无二的key;
  2. 提取出一个 ListItem 组件，你应该把 key 保存在数组中的这个 元素上，而不是放在 ListItem 组件中的
  3. 元素上;
  4. 元素的 key 在他的兄弟元素之间应该唯一;
  5. jsx的{}表达式中不能出现var,const,let等这种关键字。

组件API

  1. 设置状态：setState

    参数格式

     setState(object nextState[, function callback])

    参数说明

     nextState，将要设置的新状态，该状态会和当前的state合并
 callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
 合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

  2. 替换状态：replaceState （将被弃用）

    参数格式

    replaceState(object nextState[, function callback])

    参数说明

    nextState，将要设置的新状态，该状态会替换当前的state。
    callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
    replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

  3. 设置属性：setProps

    参数格式

    setProps(object nextProps[, function callback])

    参数说明

    nextProps，将要设置的新属性，该状态会和当前的props合并
    callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。
    设置组件属性，并重新渲染组件。

    使用场景

    props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
    更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

  4. 替换属性：replaceProps

    参数格式

    replaceProps(object nextProps[, function callback])

    参数说明

    nextProps，将要设置的新属性，该属性会替换当前的props。
    callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。
    replaceProps()方法与setProps类似，但它会删除原有 props

  5. 强制更新：forceUpdate

    参数格式

    forceUpdate([function callback])

    参数说明

    callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

    使用场景

    forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
    forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()
    一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用

  6. 获取DOM节点：findDOMNode

    获取操作：

     ReactDOM.findDOMNode(this.refs.counterDom)，日中refs挂载在真实DOM节点处，类似vue的this.$refs.XXX

    使用场景

     可以用来操作DOM

  7. 判断组件挂载状态：isMounted

    注意

     isMounted 的方法在 ES6 中已经废除。主要的原因是它经过实际使用与测试可能不足以检测组件是否挂载，尤其是对于有一些异步的程序情况，以及逻辑上造成混乱。现在用以下方法代替：
 componentDidMount() {
     this.mounted = true;
 }
 componentWillUnmount() {
     this.mounted = false;
 }

条件渲染

  1. 初始渲染页面在componentDidMount生命周期里使用

    使用场景

    React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
    当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

React 表单与事件

  1. HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态;
  2. 在 HTML 当中，像 ,