React

2024-07-15 10:36:04| 来源: 网络整理| 查看: 265

Hook的简介

Hook简单点说就是：（让函数组件具备类组件的功能） 1.只能在函数组件内使用 2.使得组件复用变得更加简单 3.抛开了class繁杂的生命周期，以及this的指向问题

一、useState的使用 1.定义useState // 由于useState的返回值是数组 // 所以数组解构出来的第一个参数是状态，第二个参数是改变状态的方法 // initialState可以是任意js类型或对象，也可以是一个函数用于惰性初始化 const [state, setState] = useState(initialState); 2.使用useState function App() { // 当我们的initialState为数值时，我们可以在setCount直接加减 const [count, setCount] = useState(0) return ( Count is: {count} setCount(count + 1); }}>increment setCount(count - 1); }}>decrement ) }

当 initialState 为一个对象时：（我们如果只需要改变state中的某一个属性，那么我们就可以用 …state 来表示其他不变的属性，这样的话在更新状态时就不会把不变的状态忽略，从而重新渲染时少了别的属性）

function App() { const [state, setState] = useState({ name: '', age: 0 }) // ...state表示其他不改变的状态 return ( name is: {state.name} age is: {state.age} setState({...state, name: "mikasa"}) }}>increment setState({...state, age: 16}) }}>decrement ) } 二、useState的惰性初始化

因为 initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); // 做复杂运算 // const initialState = 365*60*60 return initialState; }); 三、useState的原理的简单实现

1.内部会使用派发机制（每次使用useState都是不同的，独立的）

2.每次渲染都有独立的闭包 =>每次渲染都有自己的props和state =>每次渲染都有自己的事件处理函数

// 当我们使用这段代码时，只能用一次，而useState的派发机制就相当于，每创建一个useState，就相当于创建了下面这一段代码 // 所以每个useState的状态都是独立的，不受其他useState的干扰 let lastState // 储存上一次的状态 function useState(initialState){ lastState = lastState || initialState function setState(newState){ if(typeof newState === "function"){ // 如果是一个函数则执行这个函数 var result = newState(lastState) lastState = result }else{ // 状态更新 lastState = newState } // 重新渲染 render() } return [lastState, setState] }

四、使用 useState 要注意的问题

useState里数据务必为immutable （不可赋值的对象）有些时候，我们使用 useState 时，通过第二个参数改变了第一个参数之后，它没有触发更新并重复渲染原因：（1）当我们传入的值为引用类型时，更新时必须传入一个新的引用类型地址，否则无法触发更新当我们传入的值为：数值或字符串时，改变时都可以直接触发更新当我们传入的值为：数组或对象等引用类型时，改变时都必须传入一个新的引用地址, 而且必须传入一个完整的结构，不仅仅只是改变的那一部分。

不触发渲染：

const [lists, setLists] =useState([]); // hooks实现todolist中遇到的问题 ..... const arr = lists; arr.splice(index,1) //根据删除index下标的这一项 setLists(arr); // 不触发渲染 // setLists([arr]); // 不触发渲染

解决方案：

const [lists, setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根据删除index下标的这一项 setLists([...arr]); //重复赋值时改变数组的地址，触发渲染

或

const [lists,setLists] =useState([]); ..... const arr = [...lists]; //克隆的时候改变地址 arr.splice(index,1) setLists(arr);

（2）useState异步回调的问题当使用usestate对数据进行更新，并不能立刻获取到最新的数据。（和class里面的setState相似）

const [name, setName] = useState('mikasa'); const handleTest = () => { console.log(name) // mikasa setName('aron') console.log(name) // mikasa }

如果要对状态更新执行操作，则需要使用useEffect钩子，就像componentDidUpdate在类组件中使用一样，因为useState返回的setter没有回调模式

const [name, setName] = useState('mikasa'); const handleTest = () => { console.log(name) // mikasa setName('aron') console.log(name) // mikasa useEffect(() => { console.log(name) //aron },[name])

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

React

React

今日新闻

点击排行

推荐新闻

图片新闻

专题文章