React的特点
- 声明式编程
- 组件化：拆分成多个组件
- 跨平台编写
用JavaScript构建快速响应和大型WEB应用程序的首选方式之一
影响Web性能的两大主要原因：
等待资源加载：一次性请求太多资源、网络请求慢、资源加载失败
- 解决方法：React.Lazy、React.Suspense、ErrorBoundary 浏览器线程执行：js执行-》浏览器计算样式布局 -》UI绘制 堵塞
- 解决方法：异步更新、时间切片、React Fiber
用React开发web应用
声明式编程——数据决定视图 声明式与命令式的主要区别在于，声明式描述的是结果，它不关心过程。比如 SQL，我们告述数据库的是，我们要查询某张表满足某某条件的数据，但我们并不会告述数据库怎么去查，怎么查数据是数据库系统自己关心的事情。 要有如下几个优点：
- 对系统使用方，通过设计声明式的接口，开发者无需关心底层实现，而更多的关注上层业务
- 对系统实现方，通过声明式的接口，上层使用者接口相对稳定前提下，系统可以不断的迭代优化
- 对整个系统而言，能够更系统的收集更多信息，能够依据策略进行系统行为优化，提升系统效率
函数式组件——没有生命周期
函数式组件就是函数是组件，组件是函数，它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）。 在日常开发中，我们经常会开发一些纯展示性的业务组件，比如一些详情页面，列表界面等，它们有一个共同的特点是： 只要你传入数据，我就进行展现。
借助Hook、return JSX
为什么存在class组件，还增加Hook（更加清爽）
Hook规则：
- 只能在最顶层使用
useEffect(function persistForm(){
if(firstRender.current){
localStorage.seItem('formData',name);
firstRender.current = false;
}
});
- 只能在React函数中调用Hook、必须use开头
- Hook本质就是函数，会形成闭包
常见Hook及作用
常见Hook使用——组件之间共享信息
划分组件 父组件给子组件通信 子组件给父组件通信 组件挂载位置
Hooks的种类
- State hooks （在 function component 中使用 state）
- Effect hooks （在 function component 中使用生命周期和 side effect）
- Custom hooks （自定义 hooks 用来复用组件逻辑，解决了上述的第一个动机中阐述的问题）
State Hooks
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}复制代码
Hooks会返回一个Tuple，结构为[value, setValue]。
这两个返回值分别对应之前react里的
- this.state
- this.setState
我们还可以在函数中同时使用多个state
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}复制代码
之前更新state中值，通过this.setState({ fruit: 'orange' }),会对之前的state和更新后的state进行合并。
而使用Hooks，会将state进行拆分为一个个value，更新后，直接使用新值替换，不会进行state的合并。[state,setState]的结构也让值的更新逻辑更加清晰。 effectHooks让我们可以在函数组件内使用生命周期方法，我们可以在这里更新DOM，获取数据等具有'副作用'的行为。effect Hook会在组件每次render后执行,ruturn的函数会在组件卸载时执行，若要让effect hook只在组件首次加载时执行，可以传入一个空数组作为第二个参数,也可以在数组中指定依赖项，只有依赖项改变时，effectHooks才会执行。 强调一下react冒泡 他会一直冒泡到包含react树的祖先，即便这些元素并不是DOM树的祖先
