react-hooksreact-hooks函数组件 hooks的影响 hooks特点 hooks的优势 hooks 使

react-hooks函数组件

1.hooks函数，都是以use开头
2.组件开发流程
a.将UI划分出组件层级
b.创建应用的静态版本

hooks的影响

1. 生命周期函数如何映射到 Hooks？
2. 类实例成员变量如何映射到 Hooks？
3. Hooks中如何获取历史 props 和 state？
4. 如何强制更新一个 Hooks 组件？
5. class 思维到 hooks 编程思维的转变
    a. 精通 Hooks 作为新的组件开发方式
    b. hooks 只有 class类组件和函数组件

hooks特点

1.useState 解决多层组件数据传递，处理状态
2.useEffect 解决生命周期函数，解决副作用
3.useContext 
    a.不要滥用useContext,会破坏组件的独立性
    b.context
4. memo ：组件的渲染是否重复执行
    a. useMemo & useCallback
    b. 函数向子组件传递，用 useCallback
5. useRef ：DOM引用
    a. useRef 默认值不能传入函数
6. lazy & Subpense 延迟按需加载

hooks的优势

1.优化类组件的三大类问题
2.函数组件没有 this 问题
3.自定义 hooks 方便复用状态逻辑
4.副作用的关注点分离

hooks 使用原则

1. 只有在顶层使用 hooks
2. 只有react 函数才能调用 hooks
    • State Hooks
    • Effect Hooks
    • Context Hooks
    • Memo & callback Hooks
    • 自定义 Hooks
    useState
    useEffect

什么是 react hooks

• hooks 让你不写一个类 class，就可以使用 state 和 其他 react特性
hooks 代码检测

npm i eslint-plugin-react-hooks -D
// package.json 配置
"eslintConfig": {
"extends": "react-app",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
}
},