2022 React 最速上手指南(九)—— 受控组件 & 单向数据流

简介: 2022 React 最速上手指南(九)—— 受控组件 & 单向数据流

以结果为导向,写给刚学完前端三剑客和想要了解 React 框架的小伙伴,使得他们能快速上手(省略了历史以及一些不必要的介绍)。



受控组件


你可能会发现:如果在开始就赋予了 searchTerm 一个初始 state,那么输入框就只会反馈被过滤后的列表,而不展示它的初始 state,如图:


const [searchTerm, setSearchTerm] = React.useState("React");


image.png



因此我们需要把 Search 组件和其内部的输入框转换成一个【受控组件】,可以通过改变输入框的 value 属性来获取正确的初始值:


const Search = (props) => (
  <>
    <label htmlFor="search">Search: </label>
    <input
      id="search"
      type="text"
      onChange={props.onSearch}
      value={props.searchTerm}
    />
    <p>
      Searching for <strong>{props.searchTerm}</strong>.
    </p>
  </>
);
复制代码


每当改变了 searchTerm 的值,我们会通过 props 强制输入框使用 React state 中的值,而不是仅仅以原生 HTML 的方式管理内部状态。


单向数据流


image.png



通过上面的数据流向,我们会发现 React 中【单向数据流】的概念:


image.png



一个 React 应用和其中的的组件一开始都有一个初始的 state,并且可能会通过 props 的方式向下传递给其他组件,然后被渲染为 UI。当【副作用】产生时(比如用户输入或者远端 API 加载数据),所有被改变的 state ,或暗中被改变的也就是被 props 影响的组件将会重新渲染(组件的函数会被重新调用)。


这也侧面说明了 React 组件的生命周期:


  • 首先 React 中的所有组件会在组件树中从上而下地被实例化,也包含所有基于初始值实例化的 hooks
  • 一旦副作用产生,state 改变,所有受到影响的组件会重新渲染(被改变的 state 或 props 影响)
  • 重新渲染也就意味着:从 hooks 中使用最新值来重新调用组件的函数
  • hooks 只会在组件第一次渲染时【初始化一次】,之后 React 会在内部追踪其最新值


所谓副作用(Side Effect),通俗点讲就是函数在执行时做了与返回值无关的事情,比如修改了全局变量,修改了传入的参数,或者调用了 console.log() 等等。

与副作用相对还有一个概念:纯函数(Pure function),其返回结果只依赖于它的参数,并且没有任何副作用产生;纯函数这个概念放到 React 中就是 Pure component,传入相同的 props,永远只会渲染出相同的视图。

目录
打赏
0
0
0
0
7
分享
相关文章
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
160 0
React的受控组件与非受控组件(九)
【8月更文挑战第15天】React的受控组件与非受控组件
46 2
React——受控组件和非受控组件【八】
React——受控组件和非受控组件【八】
52 0
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
206 1
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。
Vue与React数据流设计比较:响应式与单向数据流
Vue与React数据流设计比较:响应式与单向数据流
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等