React Hooks

目录

1.hooks是什么？

2.Hooks的作用？

3，使用Hooks组件前后开发模式的对比？

4，Hooks使用策略？

5，为什么要有Hooks？

6.useState

useState两种格式：

7.useEffect使用

---

 

1.hooks是什么？

hooks理解字面意思就是钩子，是一些可以让你在函数组件里钩入 React state以及生命周期等特性的函数，可以让不编写class的情况下使用state以及其他的React特性

2.Hooks的作用？

为函数组件提供状态，生命周期等原本在class组件中才提供的功能

Hooks只能在函数组件中使用

可以理解为通过Hooks为函数组件钩入class组件的特性

3，使用Hooks组件前后开发模式的对比？

使用前（React v 16.8前）：class组件（提供状态）+函数组件（展示内容）

使用后（React v 16.8后）：Hooks（提供状态）+函数组件（展示内容）

4，Hooks使用策略？

（1）react没有计划从React中移除class

（2）hook和现有代码可以同时工作，可以渐进式使用

        不推荐直接使用Hooks大规模重构现有组件

        推荐新功能使用Hooks，复杂功能实现不来，也可以继续使用class

（3）class组件相关的API在hooks里面可以不用

        state  setState  钩子函数，this相关用法

（4）原来学习的内容还是要用

        JSX：{} onClick={} 、条件渲染、列表渲染、样式处理

        组件：函数组件，组件通讯

        react开发理念：单向数据流，状态提升

5，为什么要有Hooks？

首先我们要了解react的本质，接着从函数组件和类组件进行分析优缺点

react本质：用于构建用户界面的javascript库，是对特定功能的封装，主要对url进行拆分

react组件的模型其实很直观，就是从model到view的映射，这里的model对应的是react的state和props

函数式组件的好处：

• 函数本身比较简单，更好的胜任根据状态来渲染url这件事
• hooks让函数组件内部有了维护状态的能力
• hooks带来了组件的逻辑复用的能力

class组件自身的问题：

• 在根据状态来渲染url这件事上，class组件并没有发挥它的重要功能
• 组件之间很少继承
• 组件之间很少相互访问

6.useState

作用：为函数组件提供state状态

步骤：

• 导入useState函数
• 调用useState函数，传入初始值，返回状态和修改状态的函数
• 使用：在jsx中展示状态，特定的时机调用修改状态的函数修改状态

useState两种格式：

格式1：传入值 useState(0) 或useState('abc')

格式2：传入回调，useState（{上一次的值}=>{return 新值}）

•  回调函数的返回值就是状态的当前值
• 回调函数只会触发一次

7.useEffect使用

函数式组件：

主作用：就是根据数据（state/props）渲染ul

副作用：数据请求，手动修改DOM、开启定时器、清空定时器、localStorage操作等

副作用：只要是渲染数据之外的操作都是副作用，副作用不一定非要写在useEffect里，可以写外面，但是写useEffect会起到约束作用

执行时机（以下两种情况会执行Effect）：

• 组件挂载时，执行一次（相当于生命周期中componentDidMount）
• 组件更新时，可能执行多次（相当于生命周期中的componentDidUpdate）

在实际开发中，副作用是不可避免的，react专门用useEffect来处理组件中的副作用