-
作用:在函数组件中使用state以及其他的React特性
-
常用的hook:React.useState()、React.useEffect()、React.useRef()
案例:
-
类组件实现代码
javascriptimport 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方法中,返回了一个包含计数器、加法按钮、注销按钮和输入框的元素。
-
函数组件实现代码
javascriptimport 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
Hooks的使用
种草小幺儿.2023-11-11 16:27
相关推荐
懒大王爱吃狼19 分钟前
Python教程:python枚举类定义和使用小牛itbull1 小时前
ReactPress:重塑内容管理的未来待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发Devil枫5 小时前
Vue 3 单元测试与E2E测试尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)前端青山6 小时前
Node.js-增强 API 安全性和性能优化毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量