Hooks的使用

Hooks的使用"/>

Hooks的使用

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

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

  案例：

• 类组件实现代码

  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方法中，返回了一个包含计数器、加法按钮、注销按钮和输入框的元素。
  

• 函数组件实现代码

  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(){// 卸载根节点rootroot.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