React：受控组件与非受控组件混用实战

原文链接：React: hybrid controlled components in action

受控组件
非受控组件
混用受控组件和非受控组件
实施方案
总结

FBI WARNING: 对于提倡无状态设计的React来说这可能是一种反模式。

众所周知，有很多web组件可以通过用户交互改变它的状态，如<input>，<select>，或者我们常用的一些在线富文本编辑器。这些组件在日常开发中不是很起眼 - 我们可以通过在其中键入内容或设置value属性来轻松修改它的值。但是，由于React是单向数据绑定的，在React中使用这些组件不是很好控制它的状态：

1.一个维护自身State的input组件不能从外部修改它的状态；
2.一个input组件的值如果由外部props传入，则其值受外部控制；

基于上述两个特点，React提出了受控组件和非受控组件的概念。

受控组件

一个受控的input组件接受一个value属性，渲染一个<input>元素，其值反应value属性的值。

受控组件不保存其自身的内部状态; 该组件纯粹根据props呈现内容。

也就是说，如果我们有一个通过props设置value的input组件，它将持续显示props.value，即使你通过键盘输入字符。换句话说，你的组件是只读的。

很多流行的组件都是以这种方式运行。如果我们将类似value这样的属性从这些组件中移除，你好发现它会变成一个“死亡的组件”， - 谁会爱死一个死人呢？

在使用受控组件时，您必须始终传递一个value属性，同时注册一个onChange处理程序，才能以使它们处于活动状态，如此一来，它的上层组件会变的复杂和混乱。

非受控组件

一个不带value属性的input组件是非受控组件。用户的任何输入都将立即被反应在渲染元素上。

不受控制的组件保持其自身的内部状态。

这样的组件运作起来更像原生的组件。可是等等！我们如何像以前那样通过普通的js操作input.value = xxx来更改输入值呢？

遗憾的是，你没有办法从外部改变其内部的状态，因为它是不受控制。

混用受控组件和非受控组件

那么为什么不构建一个既受控又不受控制的组件呢？根据React对（非）受控组件的定义，我们可以得到一些启示和原则：

原则一

props.value始终具有比内部state.value更高的优先级。

当设置了props.value，我们应该始终使用其值代替state.value渲染组件，所以我们可以定义一个displayValue getter属性：

get displayValue() {

  return this.props[key] !== undefined ?

    this.props[key] : this.state[internalKey];

}

然后在render功能：

render() {

  return (<div>{this.displayValue}</div>);

}

原则二

组件的任何更改都应同步到内部state.value，然后通过props.onChange请求更新上层组件的状态。

将值同步到state.value可以确保组件在不受控制时能够呈现最新值。请求外部更新告诉上层组件执行更改props.value，因此受控组件也可以呈现正确的值。

handleChange(newVal) {

  if (newVal === this.state.value) return;

  this.setState({

    value: newVal,

  }, () => {

    this.props.onChange && this.props.onChange(newVal);

  });

}

原则三

当组件接收到新的props时将props.value映射到state.value

同步props.value和state.value的值是非常关键的，它能及时修正内部状态并保证handleChange的正确运转。

componentWillReceiveProps(nextProps) {

  const controlledValue = nextProps.value;

  if (controlledValue !== undefined &&

      controlledValue !== this.state.value

  ) {

    this.setState({

      value: controlledValue,

    });

  }

}

原则四

确保优先的值发生变化才更新组件。

这可以防止组件进行不必要的重新渲染，例如，受控组件在内部state.value更改时不应触发重新渲染。

shouldComponentUpdate(nextProps, nextState) {

  if (nextProps.value !== undefined) {

    // controlled, use `props.value`

    return nextProps.value !== this.props.value;

  }

  // uncontrolled, use `state.value`

  return nextState.value !== this.state.value;

}

实施方案

综上所有原则，我们可以创建一个装饰器如下：

/**

 * Optimize hybrid controlled component by add some method into proto

 *

 * Usage:

 *   @hybridCtrl

 *   class App extends React.Component {

 *     ...

 *   }

 *

 *   @hybridCtrl('specified_prop_to_assign')

 *   class App extends React.Component {

 *     ...

 *   }

 *

 *  @hybridCtrl('specified_prop_to_assign', '_internal_prop')

 *   class App extends React.Component {

 *     ...

 *   }

 */

import shallowCompare from 'react-addons-shallow-compare';

const noop = () => {};

const optimizer = (Component, key = 'value', internalKey = `_${key}`) => {

  // need `this`

  function shallowCompareWithExcept(nextProps, nextState) {

    const props = {

      ...nextProps,

      [key]: this.props[key], // patched with same value

    };

    const state = {

      ...nextState,

      [internalKey]: this.state[internalKey],

    };

    return shallowCompare(this, props, state);

  }

  const {

    shouldComponentUpdate = shallowCompareWithExcept,

    componentWillReceiveProps = noop,

  } = Component.prototype;

  Object.defineProperty(Component.prototype, 'displayValue', {

    get: function getDisplayValue() {

      // prefer to use `props[key]`

      return this.props[key] !== undefined ?

        this.props[key] : this.state[internalKey];

    },

  });

  // assign new props to state

  Object.defineProperty(Component.prototype, 'componentWillReceiveProps', {

    configurable: false,

    enumerable: false,

    writable: true,

    value: function componentWillReceivePropsWrapped(nextProps) {

      const controlledValue = nextProps[key];

      if (controlledValue !== undefined &&

          controlledValue !== this.state[internalKey]

      ) {

        this.setState({

          [internalKey]: this.mapPropToState ?

            this.mapPropToState(controlledValue) : controlledValue,

        });

      }

      componentWillReceiveProps.call(this, nextProps);

    },

  });

  // patch shouldComponentUpdate

  Object.defineProperty(Component.prototype, 'shouldComponentUpdate', {

    configurable: false,

    enumerable: false,

    writable: true,

    value: function shouldComponentUpdateWrapped(nextProps, nextState) {

      let result = true;

      if (nextProps[key] !== undefined) {

        // controlled, use `props[key]`

        result &= (nextProps[key] !== this.props[key]);

      } else {

        // uncontrolled, use `state[internalKey]`

        result &= (nextState[internalKey] !== this.state[internalKey]);

      }

      // logic OR rocks

      return result ||

        shouldComponentUpdate.call(this, nextProps, nextState);

    },

  });

  return Component;

};

export const hybridCtrl = (keyOrComp, internalKey) => {

  if (typeof keyOrComp === 'function') {

    return optimizer(keyOrComp);

  }

  return (Component) => optimizer(Component, keyOrComp, internalKey);

};

这个装饰器的使用方法如下：

import PropTypes from 'prop-types'

@hybridCtrl

class App extends React.Component {

  static propTypes = {

    value: PropTypes.any,

  }

  state = {

    _value: '',

  }

  mapPropToState(controlledValue) {

    // your can do some transformations from `props.value` to `state._value`

  }

  handleChange(newVal) {

    // it's your duty to handle change events and dispatch `props.onChange`

  }

}

总结

1.我们为什么需要混合受控组件和非受控组件？（什么场合需要使用杂交组件？）

我们需要创建同时受控和非受控制的组件，就像原生组件一样。

2.混合的主要思想是什么？

同时维护props.value和state.value。但props.value的值在渲染时具有更高的优先级，state.value反映了组件的真实值。

巴特西

React：受控组件与非受控组件混用实战 - 译文

受控组件

非受控组件

混用受控组件和非受控组件

原则一

原则二

原则三

原则四

实施方案

总结

最新文章

热门文章