网站开发需要干什么,深圳旅游必去十大景点,dedeai网站最新,团购网站建设案例Hooks
Hooks 概念理解
学习目标#xff1a; 理解 Hooks 的概念及解决的问题
什么是 hooks hooks 的本质#xff1a; 一套能够使函数组件更强大、更灵活的#xff08;钩子#xff09; React 体系里组件分为类组件和函数组件 多年使用发现#xff0c;函数组件是一个更加匹…Hooks
Hooks 概念理解
学习目标 理解 Hooks 的概念及解决的问题
什么是 hooks hooks 的本质 一套能够使函数组件更强大、更灵活的钩子
React 体系里组件分为类组件和函数组件 多年使用发现函数组件是一个更加匹配 React 的设计理念UI f(date),也更加有利于逻辑拆分与重用的组件表达形式而先前组件是不可以有自己的状态的。为了让函数组件可以拥有自己的状态所以从 react v16.8 开始加入了 hooks 注意点
有了 Hooks 之后为了兼容老版本class 类组件并没有被移除两者都可以使用有了 Hooks 之后不能在把函数成为无状态组件了因为 Hooks 为函数组件提供了状态Hooks 只能在函数组件中使用Hooks 解决了什么问题 Hooks 的出现解决了两个问题 1.组件的逻辑复用组件逻辑复用 在 Hooks 出现之前react 先后尝试了 mixin 混入、HOC 高阶组件、render-props 等模式但是都有各自的问题比如 mixin 的数据来源不清、高阶组件的嵌套问题等class 组件自身的问题 class 组件过于厚重大而全提供了很多东西有很高的学习成本比如繁多的生命周期、this 指向问题等而更多时候需要轻快的使用组件Hooks 优势告别那一理解的 class解决业务逻辑难以拆分的问题使状态逻辑复用变的简单函数组件在设计思想上与 react 的理念契合
useState
基础使用 学习目标 能够学会 useState 的基础用法 作用 useState 为函数组件提供状态state 使用步骤导入useState函数调用useState函数并传入状态初始值从useState函数的返回值中拿到状态和修改状态的方法在 JSX 中展示状态调用修改状态的方法更新状态 代码实现
import { useState } from react
function App() {const [count, setCount] useState(0)return (divbutton onClick{() setCount(count 1)}{count}/button/div)
}
export default App状态读取和修改
const [count, setCount] useState(0) // 解构赋值 useState 返回值是一个数组
useState 传过来的参数 作为 count 的初始值[count, setCount] 名字可以自定义保持语义化顺序不可以变 第一个参数是数据状态 第二个参数是修改数据的方法setCount 函数用来修改 count 依旧保持不能直接修改原值还是生成一个新值替换原值 setCount(基于运算得到的新值)count 和 setCount 是一对 是绑在一起的 setCount 只能用来修改对应的 count 值
组件的更新过程
学习目标 能够理解使用 Hooks 之后组件的更新状态 函数组件使用 useState hook 后的执行过程以及状态值的变化
组件第一次渲染 从头开始执行该组件中的代码逻辑调用useState(0)将传入参数作为状态初始值即0渲染组件此时获取到的状态 count 值为0 组件第二次渲染 1. 点击按钮调用setCount(count 1)修改状态因为状态发生改变所以该组件会重新渲染 2. 组件重新渲染时会再次执行组件中的代码逻辑 3. 再次调用setCount(0),此时 React 内部会拿到最新的状态值而非初始值 4. 再次渲染组件时获取到的状态 count 值为1 注意useState 的初始值只有在组件第一次渲染时生效以后的每一次渲染useState 获取到的都是最新的状态值
使用规则
学习目标 能够记住 useState 的使用规则
useState函数可以执行多次每次执行互相独立每调用一次为函数组件提供一个状态
function List() {// 字符串状态值const [name, setName] useState(cp)// 数组状态值const [list, setList] useState([])
}useState 注意事项只能出现在函数组件中不能嵌套在 if、for、其他函数中react 按照 hooks 的调用顺序识别每一个 hook
let num 1
function List() {numif (num / 2 0) {const [name, setName] useState(cp)}const [list, setList] useState([])
}
// 两个hook的顺序不是固定的这是不可以的可以通过开发者工具查看 hooks 状态 代码示例
import { useState } from react
function App() {const [count, setCount] useState(0)const [show, setShow] useState(false)const [list, setList] useState([])function test() {setShow(!show)setList([1, 2, 3, 4])console.log(show, list)}return (divbutton onClick{() setCount(count 1)}count:{count}/buttonbutton onClick{test}show:{show ? true : false}---list:{list}/button/div)
}
export default AppuseEffect 函数
基础使用
理解函数副作用 学习目标 能够理解函数副作用的概念 什么是函数副作用: 副作用是相对于主作用来说的一个函数除了主作用其他的作用就是副作用对于 React 组件来说主作用是根据数据state\props渲染 UI除此之外都是副作用比如手动修改 DOM 常见副作用:数据请求 ajax手动修改 DOMlocalstorage 操作 useEffect 函数的作用就是为 React 函数组件提供副作用处理 基础使用 学习目标 能够学会 useEffect 的基础用法并且掌握默认的执行时机 作用 为 React 函数组件提供副作用处理 使用步骤导入useEffect函数调用useEffect函数并传入回调函数在回调函数中编写副作用处理DOM 操作
import { useState, useEffect } from react
function App() {const [count, setCount] useState(0)useEffect(() {document.title count})return (divbutton onClick{() setCount(count 1)}count:{count}/button/div)
}
export default App依赖项控制执行时机
默认状态(无依赖项) 组件初始化时先执行一次 等每次数据修改更新再次执行
useEffect(() {console.log(副作用执行了)
})添加空数组依赖项 组件只在首次渲染时执行一次 其余时间不执行
useEffect(() {console.log(副作用执行了)
}, [])添加特定依赖项 副作用函数在首次渲染时执行在依赖项发生变化时再次执行
import { useState, useEffect } from react
function App() {const [count, setCount] useState(0)const [name, setName] useState(cp)useEffect(() {console.log(副作用执行了)document.title count}, [count, name])return (divbutton onClick{() setCount(count 1)}count:{count}/buttonbutton onClick{() setName(hs)}name:{name}/button/div)
}
export default App注意事项: 只要在 useEffect 回调函数中用到的数据比如count就是依赖数据就应该出现在依赖项数组中如果不添加依赖项就会有 bug 出现
