以结果为导向，写给刚学完前端三剑客和想要了解 React 框架的小伙伴，使得他们能快速上手（省略了历史以及一些不必要的介绍）。
React state
React props 用于父组件向子组件传递信息，也就是沿着组件树向下传递信息；React state 则用于实现应用的交互，我们可以通过交互来改变 state 。
首先我们可以从 React 中调用 useState() 去管理 state，在 React 中 useState 以及任何其他以 use开头的函数都被称为 hook，它们可以 “hook into” 不同的 React 特性。
但我们现在只需要关注 useState 这个 hook ：
import React from "react"; const App = () => { const stories = [ ... ]; const [searchTerm, setSearchTerm] = React.useState(""); ... }; 复制代码
useState() 采用一个初始 state 作为参数，也可以像这样使用一个空字符串。
同时它会返回包含两个值的数组，第一个值 searchTerm 表示当前 state；第二个值 setSearchTerm 是 state 的更新函数。
这种一个数组返回两个值的语法叫做【数组解构】，具体可以查看文档：解构赋值 。
- 举个例子：
// 定义一个数组 const list = ['a', 'b']; // 没用解构 const itemOne = list[0]; const itemTwo = list[1]; // 用了解构 const [firstItem, secondItem] = list; // 如果 useState 不用解构 const searchTermState = React.useState(''); const searchTerm = searchTermState[0]; const setSearchTerm = searchTermState[1]; 复制代码
- 使用 state 进行交互，别忘了
import React：
import React from "react"; const App = () => { const stories = [ ... ]; const [searchTerm, setSearchTerm] = React.useState(""); const handleChange = (e) => { setSearchTerm(e.target.value); }; return ( <div> <label htmlFor="search">Search: </label> <input id="search" type="text" onChange={handleChange} /> <p> Searching for <strong>{searchTerm}</strong> </p> <hr /> <List list={stories} /> </div> ); }; ... 复制代码
当用户在输入框输入内容时，内容会被处理函数捕获，然后使用 state 更新函数去设置新的 state。
在设置了新的 state 后，组件会被重新渲染，也就是组件函数会被再次执行，新的 state 会在组件的 JSX 中显示。
最后说一下：hook 一般只能在组件或者你自定义的 hooks 的【顶层】使用，你不能在条件，循环或者其他嵌套函数中调用它。在组件顶部 use 不同的 React 特性，就类似于在文件顶部 import 不同的模块。
JSX 回调处理函数
In a React app, every piece of UI is a component.
我们把输入框部分分离，作为一个独立的 Search 组件，并在 App 组件中创建一个示例，这样 Search 组件将成为 List 组件的兄弟组件：
const App = () => { const stories = [ ... ]; return ( <div> <Search /> <hr /> <List list={stories} /> </div> ); }; const Search = () => { const [searchTerm, setSearchTerm] = React.useState(""); const handleChange = (e) => { setSearchTerm(e.target.value); }; return ( <div> <label htmlFor="search">Search: </label> <input id="search" type="text" onChange={handleChange} /> <p> Searching for <strong>{searchTerm}</strong> </p> </div> ); }; 复制代码
独立出来的 Search 组件除了显示搜索项没有任何用处，由于 props 只能向下传递，所以它不能跟父组件或兄弟组件共享任何信息，但是我们可以引入回调函数：
const App = () => { const stories = [ ... ]; // 1. 引入回调函数 const handleSearch = (e) => { console.log(e.target.value); // 4. 实际调用 }; return ( <div> {/* 2. 函数作为props传递 */} <Search onSearch={handleSearch} /> <hr /> <List list={stories} /> </div> ); }; const Search = (props) => { const [searchTerm, setSearchTerm] = React.useState(""); const handleChange = (e) => { setSearchTerm(e.target.value); props.onSearch(e); // 3. 使用回调函数 }; return ( <div> ... </div> ); }; 复制代码
我们把函数从 App 组件传递到子组件 Search 中，然后在 Search 组件中调用该函数，但它实际在父组件中被执行。
将组件中的回调处理函数通过 props 传递给下层组件，我们就可以在组件树中往上传递信息，与上层组件通信。
