以结果为导向，写给刚学完前端三剑客和想要了解 React 框架的小伙伴，使得他们能快速上手（省略了历史以及一些不必要的介绍）。
JSX 处理函数
在 HTML 中，input 输入框有一个 onchange 事件处理函数，我们可以随意定义一个函数传给 onChange 属性，用来处理 input 的 change 事件，在 React 中这种函数叫做（事件）处理函数。
- 通常在组件内部定义
- 函数名称以
handle开头，事件名称紧随其后
const App = () => { const handleChange = (e) => { console.log(e.target.value); }; return ( <div> <label htmlFor="search">Search: </label> <input id="search" type="text" onChange={handleChange} /> <hr /> <List /> </div> ); }; 复制代码
在浏览器中打开应用，然后按下 F12 打开开发者工具，在终端一栏就可以看到输入框输入的内容了。
这被称为合成事件，由一个 JS 对象拿到输入框的值，本质上就是把浏览器的原生事件包了一层，附加了一些有用的函数。
我们通过给 HTML 元素附加上 JSX 处理函数来响应用户交互，只需要把函数传给这些处理函数，而不是返回值，除非返回值也是一个函数：
// 这样写不对！ <input onChange={handleChange()} /> 复制代码
React Props
我们现在把 list 变量作为一个全局变量供 App 组件和 List 组件直接使用，但如果不同文件中的多个组件使用多个变量是行不通的，我们可以使用所谓的 props 把变量从一个组件传给另一个组件。
先把 list 重命名，并移至 App 组件内部，然后使用 React props 把这个数组传给 List 组件：
const App = () => { // 全局变量移入 const stories = [ { ... }, { ... }, ]; ... return ( <div> ... <hr /> <List list={stories} /> </div> ); }; const List = (props) => ( <ul> {props.list.map((item) => ( ... ))} </ul> ); 复制代码
stories 变量在 List 组件实例化时赋给了 list 属性，然后我们在 List 组件的函数签名中通过 props 对象中的 list 访问到了它，这样操作可以避免变量污染全局作用域。
个人对 props 的浅薄理解：
- 组件就是一个函数，它对外暴露了一个可以接收外界的数据的接口，也就是 props 对象
- 可以把 props 理解成从父组件向子组件传递的数据，子组件接收到的 props 已成既定，不可改变
- 如果组件想要更改它的 props，必须要求父组件传递新的 props 对象，然后将旧的 props 丢弃等待 JS 引擎回收
- 所以当需要响应用户输入或者实现应用交互时，我们通常使用 state
专栏
因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。
在更新完后会整合为一整篇，感谢关注和点赞！
