Se necesitan datos en muchos lugares en React, lo que se llama estado en React. Necesitamos un método especial para administrar el estado, por lo que nació el relacionado con el estado. Se debe exigir que el estado tenga dos funciones básicas: en primer lugar, puede almacenar un determinado valor para que pueda ser utilizado por React y, en segundo lugar, puede ser monitoreado y vuelto a renderizar por React cuando cambia. Aquí presentamos cómo escribir el estado en los componentes de clase y función respectivamente:
componente de clase
class ClassComponent extends React.Component{
constructor(props){
super(props)
} //可写可不写
render(){
return (
//这里面可以写jsx语法
)
}
}SetState se usa generalmente para cambiar el estado. En él, puede pasar directamente un objeto a cambiar o puede pasar una función de devolución de llamada. Tenga en cuenta que si el objeto se pasa en este momento, React solo hace una copia superficial en lugar de una copia profunda Copiar, por lo que si otros objetos en el objeto se han modificado en este momento, React no puede saberlo ni renderizarlo. Básicamente, este método pasa un nuevo valor y sobrescribe el valor original. Si este valor es el mismo que el valor original, React no se procesará.
¿Por qué React es tan problemático y no puede modificar el valor directamente? Porque en React existe un concepto llamado variabilidad. React sabe lo que sucedió a través de los cambios de estado en setState, por lo que renderiza. Si el estado se cambia directamente, React no puede detectarlo, por lo que no puede renderizar. En pocas palabras, no tiene enlace de datos bidireccional como vue.
El constructor en un componente de clase se puede escribir o no. Hay dos funciones principales al escribir este constructor:
- Para asignar un objeto a this.state para inicializar el valor del estado interno
constructor(props){
super(props)
this.state = {n:12}
}
render(){
return (
<div>
<h1>THE TIME IS {this.state.n}</h1>
</div>
)
}
Tenga en cuenta que setState no se puede escribir aquí. El método anterior React también se puede configurar afuera, es decir
state = {n:12}
render(){
return (
<div>
<h1>THE TIME IS {this.state.n}</h1>
</div>
)
}- Vincular instancia a función de controlador de eventos
constructor(props){
super(props)
this.addNum = function(){fn()}.bind(this)
}
render(){
return (
<button onClick={this.addNum}>+1</button>
)
}
Sin embargo, este método también ha sido reemplazado por un nuevo método en React, cuyo código es el siguiente:
addNum = ()=>{
fn()
}
render(){
return (
<button onClick={this.addNum}>+1</button>
)
}
Por lo tanto, no es necesario escribir el método constructor anterior para heredar la clase principal.
componente de función
import {useState} from "react"
function FunctionComponent(){
const [data,setData] = useState("你要传入的初始值")
return (
<div>SHOW DATA {state}</div>
)
}
La función de setData aquí es similar a setState, pero solo se puede usar para cambiar el estado de los datos. Cuando es necesario cambiarlo, se pasa una función de devolución de llamada. El argumento de la función es el valor anterior y devuelve un valor que se va a cambiar. La esencia de este método es pasar un nuevo objeto para cambiar el valor del objeto anterior en React. Para esto, puede escribir fácilmente el valor modificado directamente. De forma predeterminada, corresponderá al objeto actual y cambiará su valor. El
método anterior es mucho más simple que el setState original, pero el problema es que si hay varios datos, useState debe usarse varias veces y no puede pasar varios valores a la vez. Sin embargo, en la mayoría de los casos, los problemas de gestión de datos los gestiona Redux, por lo que React no necesita preocuparse por ello.
Los peligros de setState
Al cambiar el estado de los componentes de React, un problema que se encuentra a menudo es la fusión de valores de setState. Mire las siguientes preguntas:
this.addNum = function () {
this.setState({num:this.state.num+1})
this.setState({num:this.state.num+1})
this.setState({num:this.state.num+1})
}.bind(this)
En este momento, cuando se activa la función addNum, num solo agrega 1. No sumó 3 como pensábamos. La propia explicación de React para esto es
Llamar a setState es en realidad asíncrono; no espere que this.state se asigne a un nuevo valor inmediatamente después de llamar a setState.
La explicación para esto es:
- No importa cuántas veces se llame a setState, la actualización no se realiza de inmediato. En su lugar, almacene el estado que se actualizará en '_pendingStateQuene' y el componente que se actualizará en 'dirtyComponent';
- Cuando el componente raíz didMount, el mecanismo de procesamiento por lotes se actualiza a falso. En este momento, elimine el estado y los componentes en '_pendingStateQuene' y 'dirtyComponent' para fusionarlos y actualizarlos;
En pocas palabras, cuando se ejecuta React, para mejorar el rendimiento, el setState que se actualizará se almacena en una matriz. Cuando se ejecuta el propio código de sincronización de React, antes de actualizar, el setState en la matriz se extrae y luego se representa. En el código anterior, agregamos el código de sincronización this.setState({num:this.state.num+1}) a setState, por lo que cuando se elimina el lote, se producirá una fusión y muchos setStates se fusionarán en uno. frase. , cambiando así sólo 1. Debido a este mecanismo, setState parece un código asincrónico, pero en realidad se ejecuta de forma sincrónica. En este momento, si cambiamos el código sincrónico anterior a asincrónico, obtendremos los resultados que queremos.
this.addNum = function () {
setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
}.bind(this)En este momento, el valor se incrementa directamente en 3, porque el código asincrónico se almacenará temporalmente cuando se ejecute el código. Ejecútelo después de que se hayan ejecutado todos los códigos de sincronización. En este momento, el mecanismo de procesamiento por lotes ha finalizado, por lo que se han ejecutado las tres funciones, por lo que se agrega 3. Esto es lo que se me ocurre hasta ahora. Si hay nuevos en en el futuro, se agregarán.