什么是 React ?
React---用于构建 Web 和原生交互界面的库
根据当前状态在网页(UI)上呈现组件, 通过在状态改变时重新渲染来使UI与状态保持同步
特点
1. 基于组件
2. 声明式
常规JS需要操作DOM来实现页面的更新, 即命令式 (How) ;
React是声明式 (What) 的, 我们只需告诉React组件基于当前数据/状态是应该是怎样的
3. 状态驱动
React通过重新渲染UI对状态的变化做出反应
4.JavaScript库
构建React项目
总结:
Vite更加适合实际项目的构建, 但需要自己去配置 (尤其是Eslint的配置) ,需要一定成本
更新 : Vite在4.3版本已经集成了Eslint！建议无脑选vite
Create react app开箱即用, 更加适合学习使用
JSX
JSX VS JS
JSX是声明式编程, JS是命令式编程
声明式编程的优点
- 你只需要告诉React希望让UI是什么状态
- React来确保DOM和这些状态是匹配的
- 你不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来
JSX Rules
Props
Props用于将数据从父组件传递给子组件(沿着组件树向下)。
Readonly
单向数据流
State
useState只能在函数组件顶层使用
使用指南
State VS Props
Thinking in React : 状态管理 (重点)
局部状态 VS 全局状态
选择指南
兄弟组件通信---状态提升(Lifting state up)
兄弟组件通信 --> 将state提升至共同父组件
子组件更改父组件state --> 通过props传入setter函数 ( inverse data flow )
Derived state
类似于Vue中的计算属性
children prop
类似于vue中的slot插槽, 子组件通过props.children接收内容
受控元素
类似于vue中v-model绑定的表单元素
在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。
-
在 HTML 中，表单元素（如
<input>、<textarea>和<select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。 -
而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
- 我们将两者结合起来，使React的state成为“唯一数据源”；
- 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
- 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”
const [step, setStep] = useState(1);
<input
type="range"
value={step}
onChange={(e) => setStep(Number(e.target.value))}
step="1"
min="0"
max="10"
/>
