React 中的常见 API 和生命周期函数

目录

• useState
• useEffect
• useRef
• dangerouslySetInnerHTML
• 生命周期函数
  • constructor
  • componentDidMount
  • static getDerivedStateFromProps
  • shouldComponentUpdate
  • componentDidUpdate
  • componentWillUnmount

useState

useState 是 React 的一个 Hook，用于在函数组件中添加状态。通过 useState，我们可以在函数组件中创建和管理状态变量，每当状态变量更新时，组件将重新渲染以显示最新的状态。

useEffect

useEffect 是 React 的另一个 Hook，用于处理副作用。副作用是指在组件渲染过程中可能产生的任何操作，例如访问 DOM、发起网络请求、订阅事件等。通过 useEffect，我们可以在组件渲染后执行这些操作。

useRef

useRef 用于在函数组件中创建可变的引用。它提供了一个持久的引用，使我们可以在多次渲染之间存储和访问数据。在上面的例子中，我们使用 useRef 创建了 divRef、inputRef 和 buttonRef，分别引用了 div、input 和 button 元素。

代码示例

import {Ref, useEffect, useRef} from "react";
// @ts-ignore
import React from "react";const Demo=React.forwardRef((props:any,ref:Ref<HTMLInputElement>)=>{return (<><input type="text" ref={ref}/></>)
})
function Contact() {const divRef=useRef<HTMLDivElement>(null);const inputRef=useRef<HTMLInputElement>(null);const buttonRef=useRef<HTMLButtonElement>(null);useEffect(()=>{console.log(inputRef.current)if(inputRef.current) {inputRef.current.focus()}console.log(buttonRef.current)})function changeContent(){if(divRef.current){divRef.current.innerHTML="<h1>hello</h1>"}}return (<div><h1>Contact</h1><br/><Demo ref={inputRef}/><button onClick={()=>{if(inputRef.current){inputRef.current.focus()}}}>focus</button><div ref={divRef} onClick={changeContent}>click</div><div dangerouslySetInnerHTML={{__html:"<h1>hekko</h1>"}}></div><input type="text" ref={inputRef}/><button ref={buttonRef}>button</button></div>);
}
export default Contact;

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 中的一个属性，用于将 HTML 字符串插入到组件中。它提供了一种绕过 React 的默认转义机制的方法，但也带来了潜在的安全风险，因此应该谨慎使用。

生命周期函数

constructor

这是组件的构造函数，在组件创建时被调用。在 constructor 中，我们通常进行一些初始化操作，如设置初始状态，绑定事件处理函数等。在构造函数中，可以通过 this.state 初始化组件的状态。

componentDidMount

这是组件的生命周期函数，在组件渲染完成后被调用。在 componentDidMount 中，我们通常进行一些异步操作，如数据请求、订阅事件等。在该函数中，可以修改组件的状态，这将导致组件重新渲染。

static getDerivedStateFromProps

这是一个静态函数，用于根据传入的 props 和当前的 state 计算并返回一个新的 state。getDerivedStateFromProps 在组件创建和更新时都会被调用，用于根据传入的 props 更新组件的状态。

shouldComponentUpdate

这是一个生命周期函数，用于判断组件是否需要重新渲染。在 shouldComponentUpdate 中，我们可以根据传入的 nextProps 和 nextState 来决定是否重新渲染组件。如果返回 true，则组件将重新渲染；如果返回 false，则组件不会重新渲染。

componentDidUpdate

这是组件的生命周期函数，在组件更新后被调用。在 componentDidUpdate 中，我们通常进行一些副作用操作，如更新 DOM、请求数据等。在该函数中，可以根据 prevProps 和 prevState 来进行一些条件判断，执行相应的操作。

componentWillUnmount

这是组件的生命周期函数，在组件即将卸载时被调用。在 componentWillUnmount 中，我们通常进行一些清理操作，如取消订阅、清除定时器等。在该函数中，应该避免执行 setState 操作，因为组件即将卸载，不再需要更新状态。

以上是 React 中常见的一些 API 和生命周期函数的介绍。通过合理地使用这些 API 和生命周期函数，我们可以更加灵活和高效地构建 React 应用。但需要注意的是，随着 React 的不断发展，一些生命周期函数可能会被废弃或替代，请根据具体的 React 版本和需求做出相应的选择。希望本篇博客对你在学习和使用 React 中有所帮助！

代码示例：

import {Component} from "react";
import {Button} from "antd";interface IState{counter:number
}
export default class Index extends Component <any,any>{constructor(props: any, context: any) {super(props, context);this.state={counter:0}console.log("constructor")}componentDidMount() {console.log("componentDidMount")}static getDerivedStateFromProps(props: any, state: any) {console.log("getDerivedStateFromProps")return null}shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean {console.log("shouldComponentUpdate")return nextState.counter!<=5}add=()=>{this.setState({counter:this.state.counter+1})}componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any) {console.log("componentDidUpdate")}componentWillUnmount() {console.log("componentWillUnmount")}render(){console.log("render")return(<><div>{this.state.counter}</div><Button onClick={this.add}>add</Button></>)}
}