精益 React 学习指南 （Lean React）- 4.3 React Tricks

react tricks

编辑中。。。

React 自身提供的 API 并不多，但总有一些比较 trick 的 API 和点是平时可能忽略的，本节将列举一下相关的点。

• setState

  • setState function param

  • setState 延迟

• ref

  • ref as function

  • 区分 DOM node 和 React node

  • 利用 ref 实现父组件到子组件的通信

• children

  • top api reactChildren

  • children as a function

• dangerouslySetInnerHTML

• 状态双向绑定

• 受控组件

  • 通过 value=null 转变为非受控

  • radio buttons

setState

setState(function)

setState 的方法定义：

void setState(
      function|object nextState,
      [function callback]
    )

通常第一个参数为 object nextState ，nextState 会被 merge 到组件的 state 数据当中，根据定义可以看出第一个参数也可以为 function，当为函数时会获得两个参数 previousState、currentState ，其返回值当做 nextState 被 merge 到 state 中。

setState(function(previousState, currentProps) {
  return {myInteger: previousState.myInteger + 1};
});

setState 延迟

首先介绍一下 transaction ，transaction 是数据库操作的概念，将对数据的操作通过 transaction 来表示，将操作和执行分离，下面以一个伪代码的方式表示对数据的操作步骤：

// 代码只是为了理解 transaction 和 react 无关
transactionManager = new TransactionManager
transactionManager.add(new Transaction(function(){
    // 修改数据的操作1
}))
transactionManager.add(new Transaction(function(){
    // 修改数据的操作2
}))
transactionManager.perform()

可以看到数据的修改操作和执行时分开的，React 和许多现代前端框架都借鉴了这一设计模式，将操作和执行分离 。 这样的好处是可以做到极大的性能优化，举个例子，我们知道 DOM 操作是极其耗时的，为了优化性能，我们可以将 DOM 操作合并一起执行。 React 的 DOM 更新也是合并执行的，这得益于 transaction 设计。

说了这么多，为的是理解 setState 的延时特性：setState 修改状态过后并不会立即生效，而是会被 React 批量执行（batch update）。

eg:

// state = {a:1}
this.setState({a:2});
console.log(this.state.a) // 1

注：transaction 在 React 中的设计和数据库的 transaction 是不同的，但不碍于理解这里的延迟批量执行策略，在 React 的实现章节中会详解 React 的 transaction 。

因为延迟执行的特性，不能用上面的方法同步获取最新状态，为了获取 setState 成功过后的状态，可以使用 callback, callback 会在修改 state 并重渲染过后调用

setState(nextState, function()) {
    // do something after setState  
})

ref

ref as function

在某些情况下，父组件可能需要引用子组件并调用其中的方法或找到子组件的 DOM，React 提供了 ref 属性作为实现方式，通常的做法是传递一个字符串，然后在组件中引用 refs。

eg:

<input ref="myInput" />

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

ref 也可以作为函数，函数传递的参数为对应组件的实例 ：

render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
},

React 官方更推荐 function , string 类型会在将来废除。

区分 DOM node 和 React node

需要注意的是，因组件不同 ref 获取到的引用也不同，主要有两种类型

1. 自定义组件：ref 引用的是 React 组件实例；

2. 原生组件： 如 div、input ，ref 引用的是 DOM node；

如果是自定义组件，为了获取组件的 DOM 可以使用 ReactDOM.findDOMNode 方法：

const $dom = ReactDOM.findDOMNode(ref);

利用 ref 实现父组件到子组件的通信

对于自定义组件的情况，ref 可以获取子组件的实例，也就可以访问子组件的实例方法。 虽然这种通信方式有违应用的 reactive 设计，但在实现第三方组件的时候，可以用过这种方式实现一些 trick 的通信。

eg:

const Child = React.createClass({
    render() {
        return <div> ...</div>
    },
    foo() {
        console.log('call child foo');
    }
})

const Parent = React.createClass({
    render() {
        return (<div>
                    <Child ref={child => {child.foo();}} />
                </div>)
    }
})

children

children top api

我们已经知道了可以通过 children 访问传递给组件的子组件，分两种情况：

1. 多个子组件：children 为一个数组

2. 单个子组件：children 为单个组件

为了更方便的操作 children， React 提供了一些工具函数

React.children.map();
React.children.forEach();
React.children.count();
// 返回唯一的一个 chid, 否则会报错
React.children.only();
React.children.toArray();

Q：为什么不用 Array.prototype.map, children 不是数组吗？
A：children 只有一个 child 的情况，作为一个组件实例，并非一个数组元素，除此之外还有一种叫 keyed fragment 的 children 类型，应当把 children 视为 不透明对象 ，操作它需要通过 children api。

keyed fragment

为了解释 keyed fragment ,先引入一个问题：

如果定义了如下的这样一个组件：

const Swapper = React.createClass({
  propTypes: {
    // `leftChildren` and `rightChildren` can be a string, element, array, etc.
    leftChildren: React.PropTypes.node,
    rightChildren: React.PropTypes.node,

    swapped: React.PropTypes.bool
  },
  render() {
    var children;
    if (this.props.swapped) {
      children = [this.props.rightChildren, this.props.leftChildren];
    } else {
      children = [this.props.leftChildren, this.props.rightChildren];
    }
    return <div>{children}</div>;
  }
});

children 如果 rightChildren 和 leftChildren 都为相同类型的数组，当 swapped 变量改变过后，左右会交换，出现的问题是所有的 children 都会 unmount 和 remount，因为对于 组件 set 并没有办法设置 key。

解决办法有两种, 第一种是左右 children 封装在两个不同的 wrapper div 中, 这样因为每个 child 都有 key , 所以不会导致 unmount。

第二种办法是通过 keyed fragment，先来看看 keyed fragment 如果解决这个问题：

const createFragment = require('react-addons-create-fragment');

if (this.props.swapped) {
  children = createFragment({
    right: this.props.rightChildren,
    left: this.props.leftChildren
  });
} else {
  children = createFragment({
    left: this.props.leftChildren,
    right: this.props.rightChildren
  });
}

通过这种方式可以为 set 创建 key, createFragment 返回的 children 同样可以通过 React.children API 进行操作。

在未来 React 可能提供如下 API 来替换 createFragment

return (
  <div>
    <x:frag key="right">{this.props.rightChildren}</x:frag>,
    <x:frag key="left">{this.props.leftChildren}</x:frag>
  </div>
);

clone Element

在某些情况下，可能需要复制 React Element 并生成新的 Element 并附带一些属性，使用方式：

ReactElement cloneElement(
  ReactElement element,
  [object props],
  [children ...]
)

对于使用场景上一节的 Decorator Pattern 就是最好的例子。

function as children

在上一节的 Presenter Pattern 中已经介绍过，可以将传递一个函数作为 children
更多相关讨论可参考

https://discuss.reactjs.org/t...