怎么用百度云做网站空间,服务公司取名,广东省发布最新消息,哪些网站是discuz做目录
Hooks概念理解
1. 什么是hooks
2. Hooks解决了什么问题
useState
1. 基础使用
2. 状态的读取和修改
3. 组件的更新过程
4. 使用规则
useEffect
1. 理解函数副作用
2. 基础使用
3. 依赖项控制执行时机
4. 清理副作用 Hooks概念理解
本节任务: 能够理解hooks的…目录
Hooks概念理解
1. 什么是hooks
2. Hooks解决了什么问题
useState
1. 基础使用
2. 状态的读取和修改
3. 组件的更新过程
4. 使用规则
useEffect
1. 理解函数副作用
2. 基础使用
3. 依赖项控制执行时机
4. 清理副作用 Hooks概念理解
本节任务: 能够理解hooks的概念及解决的问题
1. 什么是hooks
Hooks的本质一套能够使函数组件更强大更灵活的“钩子”
React体系里组件分为 类组件 和 函数组件
经过多年的实战函数组件是一个更加匹配React的设计理念 UI f(data)也更有利于逻辑拆分与重用的组件表达形式而先前的函数组件是不可以有自己的状态的为了能让函数组件可以拥有自己的状态所以从react v16.8开始Hooks应运而生
注意点 有了hooks之后为了兼容老版本class类组件并没有被移除俩者都可以使用 有了hooks之后不能在把函数成为无状态组件了因为hooks为函数组件提供了状态 hooks只能在函数组件中使用
2. Hooks解决了什么问题
Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题 组件的逻辑复用 在hooks出现之前react先后尝试了 mixins混入HOC高阶组件render-props等模式 但是都有各自的问题比如mixin的数据来源不清晰高阶组件的嵌套问题等等 class组件自身的问题 class组件就像一个厚重的‘战舰’ 一样大而全提供了很多东西有不可忽视的学习成本比如各种生命周期this指向问题等等而我们更多时候需要的是一个轻快灵活的快艇
useState
1. 基础使用
本节任务: 能够学会useState的基础用法
作用
useState为函数组件提供状态state
使用步骤 导入 useState 函数 调用 useState 函数并传入状态的初始值 从useState函数的返回值中拿到状态和修改状态的方法 在JSX中展示状态 调用修改状态的方法更新状态
代码实现
import { useState } from reactfunction App() {// 参数状态初始值比如,传入 0 表示该状态的初始值为 0// 返回值数组,包含两个值1 状态值state 2 修改该状态的函数setStateconst [count, setCount] useState(0)return (button onClick{() { setCount(count 1) }}{count}/button)}export default App
2. 状态的读取和修改
本节任务: 能够理解useState下状态的读取和修改
读取状态
该方式提供的状态是函数内部的局部变量可以在函数内的任意位置使用
修改状态 setCount是一个函数参数表示最新的状态值 调用该函数后将使用新值替换旧值 修改状态后由于状态发生变化会引起视图变化
注意事项 修改状态的时候一定要使用新的状态替换旧的状态不能直接修改旧的状态尤其是引用类型 const [count,setCount]useState(0) useSate传过来的参数 作为count的初始值 [count, setCount] 这里的写法是一个解构赋值 useState返回值是一个数组 名字可以自定义吗- 可以自定义保持语义化 顺序可以换吗- 不可以 第一个参数就是数据状态 第二个参数就是修改数据的方法 setCount函数 作用用来修改count 依旧保持不能修改原值还是生成一个新值替换原值 setCount基于原值计算得到的新值 count和setCount是一对 是绑在一起的 setCount 只能修改对应的count值 3. 组件的更新过程
本节任务: 能够理解使用hook之后组件的更新情况
函数组件使用 useState hook 后的执行过程以及状态值的变化 组件第一次渲染 从头开始执行该组件中的代码逻辑 调用 useState(0) 将传入的参数作为状态初始值即0 渲染组件此时获取到的状态 count 值为 0 组件第二次渲染 点击按钮调用 setCount(count 1) 修改状态因为状态发生改变所以该组件会重新渲染 组件重新渲染时会再次执行该组件中的代码逻辑 再次调用 useState(0)此时 React 内部会拿到最新的状态值而非初始值比如该案例中最新的状态值为 1 再次渲染组件此时获取到的状态 count 值为1
注意useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说以后的每次渲染useState 获取到都是最新的状态值React 组件会记住每次最新的状态值 import { useState } from reactfunction App() {const [count, setCount] useState(0)// 在这里可以进行打印测试console.log(count)return (button onClick{() { setCount(count 1) }}{count}/button)}export default App
4. 使用规则
本节任务: 能够记住useState的使用规则 useState 函数可以执行多次每次执行互相独立每调用一次为函数组件提供一个状态 useState 注意事项 只能出现在函数组件或者其他hook函数中 不能嵌套在if/for/其它函数中react按照hooks的调用顺序识别每一个hook let num 1function List(){numif(num / 2 0){const [name, setName] useState(cp) }const [list,setList] useState([])}// 俩个hook的顺序不是固定的这是不可以的 可以通过开发者工具查看hooks状态
useEffect
1. 理解函数副作用
本节任务: 能够理解副作用的概念
什么是副作用
副作用是相对于主作用来说的一个函数除了主作用其他的作用就是副作用。对于 React 组件来说主作用就是根据数据state/props渲染 UI除此之外都是副作用比如手动修改 DOM
常见的副作用 数据请求 ajax发送 手动修改dom localstorage操作
useEffect函数的作用就是为react函数组件提供副作用处理的
2. 基础使用
本节任务: 能够学会useEffect的基础用法并且掌握默认的执行执行时机
作用
为react函数组件提供副作用处理
使用步骤 导入 useEffect 函数 调用 useEffect 函数并传入回调函数 在回调函数中编写副作用处理dom操作 修改数据状态 检测副作用是否生效
代码实现
import { useEffect, useState } from reactfunction App() {const [count, setCount] useState(0)useEffect((){// dom操作document.title 当前已点击了${count}次})return (button onClick{() { setCount(count 1) }}{count}/button)}export default App
3. 依赖项控制执行时机
本节任务: 能够学会使用依赖项控制副作用的执行时机
1. 不添加依赖项
组件首次渲染执行一次以及不管是哪个状态更改引起组件更新时都会重新执行 组件初始渲染 组件更新 不管是哪个状态引起的更新 useEffect((){console.log(副作用执行了)})
2. 添加空数组
组件只在首次渲染时执行一次
useEffect((){console.log(副作用执行了)},[])
3. 添加特定
依赖项
副作用函数在首次渲染时执行在依赖项发生变化时重新执行
function App() { const [count, setCount] useState(0) const [name, setName] useState(zs) useEffect(() { console.log(副作用执行了) }, [count]) return ( button onClick{() { setCount(count 1) }}{count}/button button onClick{() { setName(cp) }}{name}/button / )}
注意事项
useEffect 回调函数中用到的数据比如count就是依赖数据就应该出现在依赖项数组中如果不添加依赖项就会有bug出现
4. 清理副作用
如果想要清理副作用 可以在副作用函数中的末尾return一个新的函数在新的函数中编写清理副作用的逻辑
注意执行时机为 组件卸载时自动执行 组件更新时下一个useEffect副作用函数执行之前自动执行
import { useEffect, useState } from reactconst App () {const [count, setCount] useState(0)useEffect(() {const timerId setInterval(() {setCount(count 1)}, 1000)return () {// 用来清理副作用的事情clearInterval(timerId)}}, [count])return (div{count}/div)}export default App
