受控组件

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

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

因此我们需要把 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 的方式管理内部状态。

单向数据流

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

一个 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，永远只会渲染出相同的视图。

专栏

因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。

在更新完后会整合为一整篇，感谢关注和点赞！

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

受控组件

单向数据流

专栏