React:创建同时受控与非受控的组件
提示:考虑到react的少状态设计,这里提到的方案可能是反模式。 我们都知道,有许多的web组件可以被用户的交互发生改变,比如:
最终,React提出了两个概念:受控组件和非受控组件。 受控组件
也就是说,如果我们有一个通过 很神奇的是,一些非常流行的组件也会有这样的行为。可以看下react工具箱集合,如果我们从 当我们在处理一个受控组件的时候,你应该始终传一个 非受控组件
很好,现在我们就可以像原生的元素那样进行操作了。等等,那我如何修改input元素的值呢,就像之前简单的js操作: 悲剧的是你无法从外面来修改value值,因为它是不受控的! 混合组件那么,为什么不创建一个既 原则1
当 get displayValue() {
return this.props[key] !== undefined ?
this.props[key] : this.state[internalKey];
}
然后再 render() {
return (<div>{this.displayValue}</div>); }
原则2
将值同步到 handleChange(newVal) {
if (newVal === this.state.value) return;
this.setState({
value: newVal,},() => {
this.props.onChange && this.props.onChange(newVal);
});
}
原则3
为了能修改内部的value以及在 componentWillReceiveProps(nextProps) {
const controlledValue = nextProps.value;
if (controlledValue !== undefined &&
controlledValue !== this.state.value
) {
this.setState({
value: controlledValue,});
}
}
原则4
这样能阻止组件发生不必要的二次渲染,比如,一个受控的组件在内部 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;
}
解决方案有了以上的原则后,我们可以像this gist 那样创建一个装饰器。可以这样用: @hybridCtrl
class App extends React.Component {
static propTypes = {
value: React.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、混合组件主要思想是? 同时维护 P.S. 在翻译文章后,忍不住写了个input组件的例子试了下,支持以下功能: 示例代码地址:https://github.com/abell123456/hybrid-component (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |