键指江湖的博客

只要在相同位置渲染的是相同组件， React 就会保留状态。state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。你可以通过为一个子树指定一个不同的 key 来重置它的 state。不要嵌套组件的定义，否则你会意外地导致 state 被重置。说明:文中例子参考React官方文档教程，不同的是这里使用TypeScript 来写,更详细的学习请移步React官方文档教程。

当你想要整合两个组件时，将它们的 state 移动到共同的父组件中。然后在父组件中通过 props 把信息传递下去。最后，向下传递事件处理程序，以便子组件可以改变父组件的 state。考虑该将组件视为“受控”（由 prop 驱动）或是“不受控”（由 state 驱动）是十分有益的。

你可以把数组放入 state 中，但你不应该直接修改它。不要直接修改数组，而是创建它的一份 新的 拷贝，然后使用新的数组来更新它的状态。你可以使用 […arr, newItem] 这样的数组展开语法来向数组中添加元素。你可以使用 filter() 和 map() 来创建一个经过过滤或者变换的数组。你可以使用 Immer 来保持代码简洁。

你可以在 state 中存放任意类型的 JavaScript 值。setX(5);state x 从 0 变为 5，但是数字 0 本身并没有发生改变。在 JavaScript 中，无法对内置的原始值，如数字、字符串和布尔值，进行任何更改。从技术上来讲，可以改变对象自身的内容。然而，虽然严格来说 React state 中存放的对象是可变的，但你应该像处理数字、布尔值、字符串一样将它们视为不可变的。因此你应该替换它们的值，而不是对它们进行修改。

如果你想在下次渲染之前多次更新同一个 state，你可以像 setNumber(n => n + 1) 这样传入一个根据队列中的前一个 state 计算下一个 state 的 函数，而不是像 setNumber(number + 1) 这样传入 下一个 state 值。因为每一次渲染的 state 值都是固定的，因此无论你调用多少次 setNumber(1)，在第一次渲染的事件处理函数内部的 number 值总是 0。setNumber(n => n + 1)：n => n + 1 是一个更新函数。

当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。State 变量是通过调用useStateHook 来声明的。Hook 是以use开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。Hook 可能会让你想起 import：它们需要在非条件语句中调用。调用 Hook 时，包括useState，仅在组件或另一个 Hook 的顶层被调用才有效。useStateHook 返回一对值：当前 state 和更新它的函数。

开发环境：React+ts+antd使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。学习内容1.编写事件处理函数的不同方法2.如何从父组件传递事件处理逻辑3.事件如何传播以及如何停止它们。

你可能经常需要通过 JavaScript 的数组方法 来操作数组中的数据，从而将一个数据集渲染成多个相似的组件。在这篇文章中，你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。1.如何通过 JavaScript 的 map() 方法从数组中生成组件2. 如何通过 JavaScript 的 filter()筛选需要渲染的组件3. 何时以及为何使用 React 中的 key。

JavaScript 会自动将左侧的值转换成布尔类型以判断条件成立与否。然而，如果左侧是 0，整个表达式将变成左侧的值（0），React 此时则会渲染 0 而不是不进行渲染。通常你的组件会需要根据不同的情况显示不同的内容。: 运算符来选择性地渲染 JSX。其原本是想当 messageCount 为 0 的时候不进行渲染，但实际上却渲染了 0。我们在满足 isPacked={true} 条件的物品清单旁加上一个勾选符号✔。为了更正，可以将左侧的值改成布尔类型：messageCount > 0 &&

我们可以通过在 Avatar 之后直接列出它们的名字 person, size 来读取这些 props。这些 props 在 ({ 和 }) 之间，并由逗号分隔。这样，我们可以在 Avatar 的代码中使用它们，就像使用变量一样。将一些 props 传递给 Avatar。例如，让我们传递两个 props：person（一个对象）和 size（一个数字）当然我们也可以其他页面使用product页面里面的子组件Avatar。在需要使用的组件页面具名导入Avatar，让后传入对应的值即可。

注意如果要使用Ant 的图标，需要另外引入，从 4.0 开始，antd 不再内置 Icon 组件，需使用独立的包 @ant-design/icons。这里我们主要2点：1.使用Ant的组件；2，如何引用页面组件；Ant Design of React组件引用及路由跳转，接着笔记(1)继续。公共组件目录定义了公共组件header，和底部公共组件footer。安装成功，在home.tsx文件引用。二，页面组件的引用及导航路由跳转。一，Ant组件的引用。

在package.json 文件下会看到antd 相关信息，如果要使用sass或者less预编样式、axios数据请求这些按需npm安装即可。本文使用 create-react-app 创建一个 TypeScript 项目，并引入 antd。1.命令行cd到对应的目录，这里是npm下回车运行，其他如pnpm yarn参考官网。2.进入项目并运行 cd到项目下运行 npm run start。antd-demo就是项目名称，可以自己随意起。这个是路由，后面要用到路由跳转，项目目录下运行。