概念

• 项目入口

• react和react-dom/client：项目必要的两个核心包

• 导入项目根组件，将根组件渲染到id为root的节点上，也就是将项目的根组件渲染到public的index.html的id为root的div节点上

JSX

基础语法

• 表示在JS代码中编写HTML模板结构，是React中编写UI模板的方式

• HTML声明式的模板写法+JS的可编程能力

• 本质：JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行

• 使用JS表达式：大括号语法，里面仅支持表达式，不支持语句（if、变量声明之类的）

列表渲染/条件渲染

• 列表渲染：
• 用原生js的map方法
• key值：独一无二的字符串或者number id。是react框架内部使用，用来提升更新性能的
v-for中key的作用有点像：key属性是dom元素的唯一标识，如果没有这个东西的话，在dom里面添加/删除一个元素就必须整体进行重绘，但如果有了key，重绘之前vue会检查哪些是需要重绘的新元素，如果没有的话就直接用之前的，避免资源浪费。
• 提高虚拟dom的更新性能
• 若不设置key，可能触发一些bug：比如说只更新第二行，因为没有key导致其他的元素也更新了，或者最后的结果不是更新，而是做成了多一行其他的
• 为了触发过渡的效果

• 基础条件渲染

• 复杂条件渲染
自定义函数（返回不同JSX模板）+if判断语句

事件绑定

组件

useState

• 在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

• 相当于用setCount，传入一个新值，这个方法在内部可以实现视图更新

• 规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

组件基础样式方案

• import导入，就可以使用里面的样式

• 用className来绑定类名

• 也可以直接写：

受控表单绑定

• state绑定到input的value属性

• 把input最新的value值设置到state

1. 准备一个react状态值

2. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数
input属性变化之后onChange里面的函数就会执行

库

lodash

• orderby(对象数组, ‘按某字段排序’, ‘排序方式(esc/desc)’)

• 返回一个新的数组，不会修改原数组

classnames

• key表示要显示的类名

• value表示控制类名显示的条件