目录
- 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 操作，因为组件即将卸载，不再需要更新状态。文章来源：https://www.toymoban.com/news/detail-616258.html
以上是 React 中常见的一些 API 和生命周期函数的介绍。通过合理地使用这些 API 和生命周期函数，我们可以更加灵活和高效地构建 React 应用。但需要注意的是，随着 React 的不断发展，一些生命周期函数可能会被废弃或替代，请根据具体的 React 版本和需求做出相应的选择。希望本篇博客对你在学习和使用 React 中有所帮助！文章来源地址https://www.toymoban.com/news/detail-616258.html
代码示例：
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></>
)
}
}
到了这里，关于React 中的常见 API 和生命周期函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
