手机派网站,网页设计如何设置字体,做网站行业现状,免费做电子章网站概述
useState 可以使函数组件像类组件一样拥有 state#xff0c;也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用#xff0c;底层又是怎么运作的呢#xff0c;首先一起看一下 useState 。 问题#xff1a;Hook 是什么? 一个 Hook 就是…概述
useState 可以使函数组件像类组件一样拥有 state也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用底层又是怎么运作的呢首先一起看一下 useState 。 问题Hook 是什么? 一个 Hook 就是一个特殊的函数让你在函数组件中获取状态等 React 特性 使用模式函数组件 Hooks 特点从名称上看Hook 都以 use 开头 基本使用 使用场景当你想要在函数组件中使用组件状态时就要使用 useState Hook 了作用为函数组件提供状态state使用步骤 导入 useState 函数import { useState} from react调用 useState 函数并传入状态的初始值从 useState 函数的返回值中拿到状态和修改状态的函数在 JSX 中展示状态在按钮的点击事件中调用修改状态的函数来更新状态
规则 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用
useState接受唯一一个参数在第一次组件被调用时使用来作为初始化值 使用数组解构简化
比如要获取数组中的元素 原始方式索引访问
const arr [aaa, bbb]const a arr[0] // 获取索引为 0 的元素
const b arr[1] // 获取索引为 1 的元素 简化方式数组解构 相当于创建了两个变量可以是任意的变量名称分别获取到对应索引的数组元素
const arr [aaa, bbb]
const [a, b] arrconst [state, setState] arr 使用数组解构简化 useState 的使用 约定修改状态的函数名称以 set 开头后面跟上状态的名称
// 解构出来的名称可以是任意名称
const [state, setState] useState(0)
const [age, setAge] useState(0)
const [count, setCount] useState(0) 演示示例
父传子
App.js--父组件
import React from react
import UseFun from ./components/useFunexport default function App() {let msg 132return (divUseFun msg{msg}//div)
} src/components/useFun.js--子组件
import React from react
import PropTypes from prop-typesfunction useFun(props) {return (div{props.msg}/div)
}useFun.defaultProps {msg: 456
}useFun.propTypes {msg: PropTypes.string
}export default useFun 计数器
App.js
import React from react
import UseFun from ./components/UseFun
import CountFun from ./components/CountFunexport default function App() {let msg 132return (divCountFun //div)
} components/CountFun.jsx
import React from react
import { useState } from react;export default function CountFun() {let [count, setCount] useState(0)function changeCount(){setCount(count 1)}return (div{/* 展示状态值 */}h1useState Hook - {count}/h1{/* 点击按钮让状态值 1 */}button onClick{changeCount}1/buttonbutton onClick{() changeCount()}1/button/div)
} 或下面的做法也可以
import { useState } from reactexport default function const CountFun () {// 返回值是一个数组const stateArray useState(0)// 状态值 - 0const state stateArray[0]// 修改状态的函数const setState stateArray[1]return (div{/* 展示状态值 */}h1useState Hook - {state}/h1{/* 点击按钮让状态值 1 */}button onClick{() setState(state 1)}1/button/div)
}
参数状态初始值。比如传入 0 表示该状态的初始值为 0 注意此处的状态可以是任意值比如数值、字符串等而 class 组件中的 state 必须是对象
返回值数组包含两个值1 状态值state 2 修改该状态的函数setState useState详解
概述
状态的读取和修改
状态的使用1 读取状态 2 修改状态
读取状态该方式提供的状态是函数内部的局部变量可以在函数内的任意位置使用修改状态
setCount(newValue) 是一个函数参数表示新的状态值调用该函数后将使用新的状态值替换旧值修改状态后因为状态发生了改变所以该组件会重新渲染 组件的更新过程
函数组件使用 useState hook 后的执行过程以及状态值的变化
组件第一次渲染 从头开始执行该组件中的代码逻辑调用 useState(0) 将传入的参数作为状态初始值即0渲染组件此时获取到的状态 count 值为 0
组件第二次渲染 点击按钮调用 setCount(count 1) 修改状态因为状态发生改变所以该组件会重新渲染组件重新渲染时会再次执行该组件中的代码逻辑再次调用 useState(0)此时 React 内部会拿到最新的状态值而非初始值比如该案例中最新的状态值为 1再次渲染组件此时获取到的状态 count 值为1 注意useState 的初始值(参数)只会在组件第一次渲染时生效。 也就是说以后的每次渲染useState 获取到都是最新的状态值。React 组件会记住每次最新的状态值! 注意点
在普通函数(方法)中不能使用hooks在自定义的hooks中可以使用自定义hooks必须以use开头 基本数据类型
引入useState
import { useState } from react; 在函数组件内部定义state数据
let [count, setCount] useState(0);
let [name, setName] useState(张三) useState会返回一个数组数组有两个值
第一个值代表state数据第二个值更新这个state数据的一个函数一般函数变量取名字通常是setXxx 可以定义多个 state值
修改数据
function changeName() {setName(李四);
} 完整代码
import React from react
import { useState } from react;function useFun(props) {let [msg, setMsg] useState(张三)function changeMsg(){setMsg(李四)}return (divpmsg{msg}/pbutton onClick{changeMsg}修改msg/button/div)
}export default useFun 引用数据类型
定义对象数据
let [user, setUser] useState({name: zs,age: 20
}) 修改对象
function changeUserName() {setUser({name: ls,})
}
这样修改对象会导致其他属性丢失因为它没有自动合并对象 正确方式
function changeUserName() {setUser({...user,name: ls,})
}
可以将整个对象解构扩展然后将修改的属性覆盖原来属性 注意
修改state数据第一个参数可以是函数
setUser((prevState) {console.log(prevState)return {...prevState,name: ls}
})
这个函数和类组件的setState的第一个参数是一致的 修改数据函数没有第二个参数
修改数据的函数仍然是异步的不是同步的。 完整代码
import React from react;
import { useState } from react;function useFun(props) {let [msg, setMsg] useState(张三);let [user, setName] useState({name: zs,age: 20,});function changeMsg() {setMsg(李四);}const changeName () {// setName({// ...user,// name: ls// })//或如下写法setName((prevState) {console.log(prevState);return {...prevState,name: ls,};});};return (divpmsg{msg}/pbutton onClick{changeMsg}修改msg/buttonhr /pname:{user.name}/ppage: {user.age}/pbutton onClick{changeName}修改name/button/div);
}export default useFun; 为函数组件添加多个状态
问题如果一个函数组件需要多个状态该如何处理? 回答调用 useState Hook 多次即可每调用一次 useState Hook 可以提供一个状态。 注意useState Hook 多次调用返回的 [state, setState] 相互之间互不影响。 注意React Hooks 只能直接出现在 函数组件 中不能嵌套在 if/for/其他函数中 否则就会报错React Hook useState is called conditionally. React Hooks must be called in the exact same order in every component render React 的 useState 这个 Hook 被条件性放在一个条件判断中的调用了。
React Hooks 必须要每次组件渲染时按照相同的顺序来调用所有的 Hooks。
为什么会有这样的规则 因为 React 是按照 Hooks 的调用顺序来识别每一个 Hook如果每次调用的顺序不同导致 React 无法知道是哪一个 Hook通过开发者工具可以查看到。 如何监听 state 变化
类组件 setState 中有第二个参数 callback 或者是生命周期componentDidUpdate 可以检测监听到 state 改变或是组件更新。
那么在函数组件中如何怎么监听 state 变化呢这个时候就需要 useEffect 出场了通常可以把 state 作为依赖项传入 useEffect 第二个参数 deps 但是注意 useEffect 初始化会默认执行一次。
具体可以参考如下 Demo : dispatch更新特点
上述讲的批量更新和 flushSync 在函数组件中dispatch 更新效果和类组件是一样的但是 useState 有一点值得注意就是当调用改变 state 的函数dispatch在本次函数执行上下文中是获取不到最新的 state 值的把上述demo 如下这么改 结果000
原因很简单函数组件更新就是函数的执行在函数一次执行过程中函数内部所有变量重新声明所以改变的 state 只有在下一次函数组件执行时才会被更新。所以在如上同一个函数执行上下文中number 一直为0无论怎么打印都拿不到最新的 state 。 useState注意事项
在使用 useState 的 dispatchAction 更新 state 的时候记得不要传入相同的 state这样会使视图不更新。比如下面这么写 如上例子中当点击按钮后发现视图没有改变为什么会造成这个原因呢
在 useState 的 dispatchAction 处理逻辑中会浅比较两次 state 发现 state 相同不会开启更新调度任务 demo 中两次 state 指向了相同的内存空间所以默认为 state 相等就不会发生视图更新了。
解决问题 把上述的 dispatchState 改成 dispatchState({...state}) 根本解决了问题浅拷贝了对象重新申请了一个内存空间。
