Hooks的使用

  • 作用:在函数组件中使用state以及其他的React特性

  • 常用的hook:React.useState()、React.useEffect()、React.useRef()

    案例:

  • 类组件实现代码

    javascript 复制代码
    import React, { Component } from 'react'
    import { root } from '../../index'
    
    export default class countClass extends Component {
        state = { count: 0 }
        myRef = React.createRef()
    
        componentDidMount(){
            this.timer = setInterval(()=>{
                this.setState(state => ({count:state.count+1}))
            },1000)
        }
        componentWillUnmount(){
            clearInterval(this.timer)
        }
    
        add = () => {
            this.setState(state => ({ count: state.count + 1 }))
        }
        unmount = ()=>{
            root.unmount();
            // ReactDOM.unmountComponentAtNode(document.getElementById('root'))
        }
        show = ()=>{
            alert(this.myRef.current.value);
        }
        render() {
            return (
                <div>
                    <h4>当前求和为:{this.state.count}</h4>
                    <button onClick={this.add}>+</button>
                    <button onClick={this.unmount}>注销</button><br />
    
                    <input type="text" ref={this.myRef} />
                    <button onClick={this.show}>提示输入内容</button>
                </div>
            )
        }
    }
    
    	//这段代码定义了一个名为countClass的React组件,它实现了以下功能:
    	//1.导入了React库和Component类。
    	//2.导入了root,用于获取根组件的引用。
    	//3.定义了一个名为countClass的类,继承自Component类。
    	//4.在组件的state中定义了一个名为count的属性,初始值为0。
    	//5.创建了一个名为myRef的引用,用于获取组件中的DOM元素。
    	//6.在组件挂载时(componentDidMount)设置一个定时器,每隔1000毫秒(1秒)更新count的状态。
    	//7.在组件卸载时(componentWillUnmount)清除定时器。
    	//8.定义了一个名为add的方法,用于更新count的状态。
    	//9.定义了一个名为unmount的方法,用于卸载根组件(root)。
    	//10.定义了一个名为show的方法,用于显示输入框中的内容。
    	//11.在组件的render方法中,返回了一个包含计数器、加法按钮、注销按钮和输入框的元素。
  • 函数组件实现代码

    javascript 复制代码
    import React from 'react'
    import { root } from '../../index';
    
    function Demo() {
        /**
         * useState()说明:
         * 参数:第一次初始化指定的值在内部作缓存
         * 返回值:包含2个元素的数组,第一个为内部当前状态,第二个为更新状态值的函数
         */
        const [count,setCount] = React.useState(0)
        const myRef = React.useRef()
    
        /**
         * React.useEffect(()=>{},[]):
         * 第二个参数为[],相当于componentDidMount()
         * 第二个参数不为[]或没有传,相当于componentDidMount()+componentDidUpdate()
         */
        React.useEffect(()=>{
            let timer = setInterval(()=>{
                setCount(count => count+1)
            },1000)
            return ()=>{
                // 组件卸载前执行,相当于componentWillUnmountt()
                clearInterval(timer)
            }
        },[])
    
        function add() {
            /**
             * setCount()两种写法:
             * setCount(newValue):参数为非函数值,直接指定新的状态值,内部用其覆盖原来的状态值
             * setCount(value => newValue):参数为函数,接受原本的状态,返回新的状态,内部用其覆盖原来的状态值
             */
            setCount(count+1)
            // setCount(count => count+1)
        }
        function unLoad(){
            // 卸载根节点root
            root.unmount();
        }
        function show(){
            alert(myRef.current.value)
        }
        return (
            <div>
                <h4>当前求和为:{count}</h4>
                <button onClick={add}>+</button>
                <button onClick={unLoad}>卸载</button><br />
    
                <input type="text" ref={myRef} />
                <button onClick={show}>提示输入内容</button>
            </div>
        )
    }
    
    export default Demo
相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试