精益 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,当为函数时会获得两个参数 previousStatecurrentState ,其返回值当做 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...

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...