浅谈react受控组件与非受控组件(小结)

 更新时间:2018年02月09日 09:51:59   作者:yinjing8435  
本篇文章主要介绍了浅谈react受控组件与非受控组件(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

我们都知道,有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>,或者是我现在正在使用的富文本编辑器。这些组件在日常的开发中很不显眼,我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是,因为React是单向数据流绑定的,这些组件可能会变得失控:

1.一个维护它自己state里的value值的<Input>组件无法从外部被修改;

2.一个通过props来设置value值的<Input>组件只能通过外部控制来更新。

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值。具体编辑页面中文本框相关的代码如下:

    ... //render方法上面的内容省略
 <FormItem
   label="问题描述:"
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...

在给代码段所属的组件传递value props后,文本框中的默认值一直为空,因为该页面所在的状态state中,value所对应的状态初始值为空,导致后续异步请求成功后改变value对应的状态中的值,仍然显示为空。

google一下具体原因,原来React的form表单组件中的defaultValue一经传递值后,后续改变defaultValue都将不起作用,被忽略了。

具体来说这是一种react非受控组件,其状态是在input的react内部控制,不受调用者控制。可以使用受控组件来实现。

下面就说说这个受控组件与非受控组件,它们都是基于react的form表单组件元素的,具体也可参考react官网这方面介绍

受控组件

就形式上来说,受控组件就是为某个form表单组件添加value属性;非受控组件就是没有添加value属性的组件;,受控组件的形式如下形式:

render: function() {
  return <input type="text" value="Hello!" />;
 }

添加了value 属性的表单组件元素其内部是不会维护自己状态state,组件的value值一旦设置某个具体值就始终是这个值,所以需要调用者来控制组件value的改变。

这种写法带来一个问题:渲染后的input组件的用户交互,用户输入的任何值将不起作用,input输入框中的值始终为Hello!。这与HTML中input表现不一致。

为此,为了控制该组件,就需要能能够控制input组件的值,需要借助其内部的状态state,即组件内部要维护一个状态state以便配合input组件的onChange和setState方法来完成对组件的控制;例如对上面形式可以进行封装一个inputItem组件,其内部维护一个state状态,具体代码如下:

 export default class InputItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      value: nextProps.value
    })
  }

  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }

  render(){
    return (
      <input type="text" 
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );
  }
}

这样就可以在外部像下面这样调用InputItem组件了:

<InputItem value={this.state.userName} />

这样就可以控制react的Input组件了,其实就是需要借助react的有状态component来完成,因为有状态component可以内部维护state。

非受控组件

表现形式上,react中没有添加value属性的表单组件元素就是非受控组件。表现形式如下:

<input type="text" />

非受控组件在底层实现时是在其内部维护了自己的状态state;这样表现出用户输入任何值都能反应到元素上。

总结

在使用react component时,都会遇到受控组件或者非受控组件;在目前,react组件推荐使用stateless component,但是使用该形式来实现react component时使用非受控组件到倒是没有什么大问题,若是需要控制受控元素就会有出现问题,表现在:

`受控组件`需要主动维护一个内部state状态的,而`stateless component`是无需维护组件的state状态的,二者有冲突。
所以,受控元素就不能使用stateless component来创建。

鉴于受控组件与非受控组件的特点,二者应用的地方也有所不同,主要表现在:

  1. 受控元素,一般用在需要动态设置其初始值的情况;例如某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。
  2. 非受控元素, 一般用于无任何动态初始值信息的情况; 例如form表单创建信息时,input表单元素都没有初始值,需要用户输入的情况

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • react搭建环境时执行npm start报错start: 'react-scripts start'的解决

    react搭建环境时执行npm start报错start: 'react-scripts&

    这篇文章主要介绍了react搭建环境时执行npm start报错start: 'react-scripts start'的解决方案,具有很好的参考价值,希望杜对大家有所帮助,
    2023-10-10
  • React手稿之 React-Saga的详解

    React手稿之 React-Saga的详解

    这篇文章主要介绍了React手稿之 React-Saga的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • react中路由跳转及传参的实现

    react中路由跳转及传参的实现

    本文主要介绍了react中路由跳转及传参的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • react将文件转为base64上传的示例代码

    react将文件转为base64上传的示例代码

    本文主要介绍了react将文件转为base64上传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • React HOC高阶组件深入讲解

    React HOC高阶组件深入讲解

    高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧
    2022-10-10
  • react hooks页面实时刷新方式(setInterval)

    react hooks页面实时刷新方式(setInterval)

    这篇文章主要介绍了react hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • JS跨域解决方案react配置反向代理

    JS跨域解决方案react配置反向代理

    这篇文章主要为大家介绍了JS跨域解决方案react配置反向代理的示例内容详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2021-11-11
  • React Hook 四种组件优化总结

    React Hook 四种组件优化总结

    这篇文章主要介绍了React Hook四种组件优化总结,文章围绕主题展开详细的内容介绍,具有一定的参考价孩子,需要的朋友可以参考一下
    2022-07-07
  • 编写React组件项目实践分析

    编写React组件项目实践分析

    本文通过实例给大家分享了编写React组件项目实践的全过程,对此有兴趣的朋友可以参考下。
    2018-03-03
  • React中常用的Hook有哪些

    React中常用的Hook有哪些

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定,节后实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-01-01

最新评论