可以免费浏览的网站,怎么做网络乞丐网站,小程序制作二维码,建站宝盒怎么样react hook是react推出的一种特殊函数。这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性#xff08;诸如目前react的钩子函数拥有的所有特性#xff09;。最常用的hook有useState, useEffect, 日常开发使用这两个就足够了。如果再懂点useReduer, us… react hook是react推出的一种特殊函数。这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性诸如目前react的钩子函数拥有的所有特性。 最常用的hook有useState, useEffect, 日常开发使用这两个就足够了。如果再懂点useReduer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue 自定义hook就再好不过了。useState是什么它允许我们在react函数组件里使用state可以完全替代this.state的所有特性。不过hook只可以用在函数组件里在类组件里不生效哦怎么用useState引入useStateImport React, { useState } from ‘react’2. 在函数组件里声明state属性const [ xx, setXxx ] useState(xx的初始值);useState方法接受的唯一参数就是xx的初始值。3. 在函数组件里想要读取state属性函数组件里没有this读取state属性是直接读取xx 4. 在函数组件里想更新state属性直接使用setXxx( xx的更新值) 即可更新xx的值 实例操作场景: 某个文档文字过长点击“查看更多”按钮文档会全部展示出来点击“收起”按钮文档会收起一部分。实现思路定义一个state属性fold类型为boolean当展示”收起”按钮时fold值为true点击可切换成“查看更多”fold值也会变为false; 实现代码使用react 类组件实现如下import React, {Component} from react;class HookExample extends Component {constructor(props){super(props);this.state {fold: true,}}render() {const { fold } this.state;return (div classNamehook-examplearticleheaderh2Life/h2/headersection className{fold ? fold : unfold}p If life is a river it is the most exciting section./pp Flowing a trickle of childhood life began to restlessness personality spray a piece after piece of Pentium the melody of youth。It is surging its always a time of the wild and intractable slap embankment heaving ship of life。/p/section/articlespan onClick{(){this.setState({fold: !fold})}}{fold ? 查看更多 : 收起}/span/div);}
}export default HookExample;
使用hook函数组件实现如下import React, {useState} from react;
function HookExample(){const [fold, setFold] useState(true);return (div classNamehook-examplearticleheaderh2Life/h2/headersection className{fold ? fold : unfold}p If life is a river it is the most exciting section./pp Flowing a trickle of childhood life began to restlessnesspersonality spray a piece after piece of Pentium the melody of youth。 It is surging its always a time of the wild and intractable slap embankment heaving ship of life。/p/section/articlespan onClick{(){setFold(!fold)}}{fold ? 查看更 多 : 收起}/span/div);
}
export default HookExample;
页面效果实现步骤详解第一步创建组件声明state属性使用react类组件可以这样实现import React, {Component} from react;
class HookExample extends Component {
constructor(props){super(props);this.state {fold: true,}
}
而用useState只需import React, {useState} from react;
function HookExample(){
const [fold, setFold] useState(true);
useState只接收一个参数就是该state属性的初始值。它会返回一个数组里面包含两个值通过数组解构的方式将第一个值赋给用户定义的state属性(即fold)第二个值为state属性的更新函数赋给用户定义的属性更新函数(setFold)。const [ fold, setFold ] useState(true)
// 等同于
const result useState(true);
const fold result[0];
const setFold result[1];
第二步读取state属性在react 类组件里我们需要这样const { fold } this.state;
section className{fold ? fold : unfold}
在使用了hook的函数组件里我们只需section className{fold ? fold : unfold}
类组件里我们需要通过this.state读取到fold的值。而在函数组件里直接使用fold即可。第三步 更新state属性react组件里如下span onClick{(){ this.setState({fold: !fold}) }}{fold ? 查看更多 : 收起}/span
在函数组件里如下span onClick{(){setFold(!fold)}}{fold ? 查看更多 : 收起}/span
在类组件里通过调用setState更新fold更新后的fold会与当前的state对象进行合并。而在函数组件里直接调用第一步声明的更新函数setFold即可更新fold的值fold值更新后react会重新渲染HookExample组件并把最新的fold值传给它。使用小提示在实际开发中我们可能需要多个state属性。你可以写多个useStateconst [A1, setA1] useState();
const [A2, setA2] useState(true);
如果state属性直接有业务关联那么可以把这几个state属性合在一起用一个useState即可。const [A, setA] useState({A1: ‘’,A2: true
});
与react类组件不同的是当我们更新属性A时会完全替代之前的A值而不是merge原来的A值。恭喜你学会了useState接下来还有useEffect等一系列教程等着你要加油哦
