尚硅谷react教程_扩展_stateHook

呵呵哒(￣▽￣)"2024-11-03 15:08

1.类式组件写

javascript 复制代码

import React, {Component} from 'react';

export default class Demo extends Component {
    state = {count:0}
    add = () => {
        this.setState(state=>({
            count:state.count+1
        }))
    }
    render() {
        return (
            <div>
                <h2>当前求和为{this.state.count}</h2>
                <button onClick={this.add}>点我+1</button>
            </div>
        );
    }
}

2.函数式组件写的

javascript 复制代码

import React from 'react';

// 函数式组件
function Demo() {
    const [count,setCount] = React.useState(0)
    const [name,setName] = React.useState('tom')

    // 加的回调
    function add() {
        // setCount(count+1) // 第一种写法
        // setCount((count)=>{ // 第二种写法
        //     return count+1
        // })

        setCount(count=> count+1) // 第二种写法的简写方式
    }

    // 修改名字
    function changeName() {
        setName('jack')
    }
    return (
        <div>
            <h2>当前求和为:{count}</h2>
            <h2>我的名字为:{name}</h2>
            <button onClick={add}>点我+1</button>
            <button onClick={changeName}>点我改名</button>
        </div>
    )
}

export default Demo;

复制代码

State Hook
（1）State Hook让函数组件也可以有state状态，并进行状态数据的读写操作做
（2）语法：const [xxx,setXxx] = React.useState(initValue)
（3）useState()说明：
    参数：第一次初始化指定的值在内部作缓存
    返回值：包含2个元素的数组，第一个为内部当前状态值，第二个为更新状态值的函数
（4）setXxx()2种写法：
    setXxx(newValue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
    setXxx(value => newValue)：参数为函数，接收原来的状态值，返回新的状态值，内部用其覆盖原来的状态值