react组件的分类大全，以及受控组件和非受控组件

组件的分类方式有哪些？

1. 分是否有状态：有状态组件，无状态组件
2. 按定义方式不同：函数组件（构造函数组件），类组件（class组件）
3. 按默认是否受state控制：受控组件，非受控组件。
4. 按组件的功能:展示型组件和容器型组件
   这里参考了一下：https://www.jianshu.com/p/5a34090077f3

目录

React: 受控组件与非受控组件区别
受控组件
示范代码:
原理图：
非受控组件
示范代码：
结论

展开

一：受控组件

在HTML中，标签、、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。<br> 注意，这里引用的时候，使用了反斜杠，才能正常输出<input>、<textarea>、<select></p> </blockquote> <h5 id="代码演示">代码演示</h5> <pre><code>class NameForm extends React.Component { constructor(props) { super(props); this.state = {name: ‘‘}; this.handleNameChange = this.handleNameChange.bind(this); } handleNameChange(event) { this.setState({ name: event.target.value }); }; render() { return ( <div> <input type="text" value={this.state.name} OnChange={this.handleNameChange}/> </div> ); } } </code></pre> <h5 id="代码分析">代码分析</h5> <p><strong>原理图：</strong><br> name开始是空字符串‘‘。<br> 当键入a，并handleNameChange获取a和调用setState。然后，该输入被重新呈现为具有的值a。<br> 当键入b，handleNameChange获取ab并设置该状态的值。现在再次重新渲染输入value="ab"。<br> 这也意味着表单组件可以立即响应输入更改;?例如：<br> 就地反馈，如验证<br> 禁用按钮，除非所有字段都有有效的数据<br> 执行特定的输入格式，如信用卡号码<br> <strong>"受控"执行情况:</strong><br> <img alt="技术图片" src="https://img8.php1.cn/3c972/1bdbc/2be/f17dd8dd55d6be03.jpeg" ></p> <p><strong>可见效果：</strong><br> 当注释this.setState({value: event.target.value}); 这行代码，文本框再次输入时，页面不会重新渲染，所产生效果即是文本框输入不了值，即文本框值的改变受到setState()方法的控制，在未执行时，不重新渲染组件。</p> <h4 id="二非受控组件">二.非受控组件</h4> <blockquote> <p>表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）</p> </blockquote> <h4 id="代码演示-2">代码演示</h4> <pre><code>class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { alert(‘A name was submitted: ‘ + this.input.value); event.preventDefault(); } render() { return ( <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> ); } } </code></pre> <h4 id="三结论">三.结论</h4> <p>受控和非受控元素都有其优点，根据具体情况选择。如果表单在UI反馈方面非常简单，则对ref进行控制是完全正确的，即使用非受控组件。</p> <table> <thead> <tr> <th>特征</th> <th>非受控制</th> <th>受控</th> </tr> </thead> <tbody> <tr> <td>一次性检索（例如表单提交）</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>及时验证</td> <td>no</td> <td>yes</td> </tr> <tr> <td>有条件的禁用提交按钮</td> <td>no</td> <td>yes</td> </tr> <tr> <td>执行输入格式</td> <td>no</td> <td>yes</td> </tr> <tr> <td>一个数据的几个输入</td> <td>no</td> <td>yes</td> </tr> <tr> <td>动态输入</td> <td>no</td> <td>yes</td> </tr> </tbody> </table> <p>参考地址 ：https://blog.csdn.net/qq_41846861/article/details/86598797</p><p>react组件的分类大全，以及受控组件和非受控组件</p></span> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/android" target="_blank" title="android">android</a></li> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/jsp" target="_blank" title="jsp">jsp</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/react" target="_blank" title="react">react</a></li> <li><a href="https://www.php1.cn/tag/数组" target="_blank" title="数组">数组</a></li> <li><a href="https://www.php1.cn/tag/编程" target="_blank" title="编程">编程</a></li> <li><a href="https://www.php1.cn/tag/windows" target="_blank" title="windows">windows</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了