Este artículo es una nota de estudio que escribí cuando estaba aprendiendo React, la grabaré y la compartiré aquí. Este es el cuarto artículo, que presenta principalmente el estado en reacción.
1.estado (estado)
1.1 Introducción al estado
Los componentes con estado se denominan componentes complejos y viceversa, se denominan componentes simples.
¿Qué es el estatus? Por ejemplo, las personas tienen estados y los estados afectan el comportamiento de las personas. Los componentes también tienen estado, los datos se almacenan en el estado y el estado controla la visualización de la página.
1.el estado es el atributo más importante en el objeto componente y el valor es el objeto (puede contener múltiples combinaciones clave-valor)
2. Los componentes se denominan "máquinas de estado" y la visualización de la página correspondiente se actualiza actualizando el estado del componente (volviendo a representar el componente).
3. Entre los componentes definidos por la clase, el estado es uno de sus tres atributos principales, los otros dos son accesorios y referencias.
1.2 Caso: Cambio entre caliente y frío
1.2.1 Conmutación en tiempo no real
Primero creamos el componente de clase Weather e imprimimos este puntero en la función reander.
Como se muestra en la figura, imprimimos el objeto de instancia Weather, hay un estado en el objeto de instancia y el estado es un objeto. Si no configuramos el estado, entonces es un objeto vacío. En el código escribimos: this.state = {isHot:true}, por lo que ahora están los datos isHot: true en el estado.
Al construir el dom virtual dentro de la función de renderizado, usamos el operador ternario para mostrar caliente o frío dependiendo de si this.state.isHot es verdadero o falso.
Código:
<!-- 准备好容器 -->
<div id="test"></div><!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">//写为babel格式，否则识别为普通js文件
class Weather extends React.Component {
constructor(props){//使用构造器和super关键字，从父类继承props
super(props)
this.state = {isHot:true}//为实例中的State
}
render() {
console.log(this);
return <h1>今天天气很{this.state.isHot?'炎热':'凉爽'}</h1>
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>Mostrar resultados:
Si configuramos manualmente this.state = {isHot:false}
resultado:
1.2.2 Vincular eventos a elementos en React
Ahora que queremos implementar el cambio dinámico entre caliente y frío, primero debemos vincular eventos a los elementos. Como todos sabemos, hay tres formas de agregar eventos a elementos en js nativo, elemento .onclick, elemento .addEventListener('nombre del evento', cuerpo de la función) y <div οnclick='demo()'>botón</div> . Usamos el tercero, pero presta atención a escribirlo como <div onClick={demo}>Botón</div>. En React, el nombre del evento debe escribirse en minúscula camello y no se pueden agregar paréntesis después del nombre de la función. De lo contrario, la función se llamará directamente. Cuando el dom se representa en la interfaz, el valor de retorno de la función se representa directamente en conjunto.
Los cambios de código son los siguientes:
class Weather extends React.Component {
constructor(props){//使用构造器和super关键字，从父类继承props
super(props)
this.state = {isHot:false}//为实例中的State
}
render() {
console.log(this);
//为h1标签添加点击事件和点击后触发的函数demo
return <h1 onClick={demo}>今天天气很{this.state.isHot?'炎热':'凉爽'}</h1>
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
function demo(){//点击事件的函数
console.log('此标签被点击');
}El efecto es el siguiente:
1.2.3 Implementar conmutación dinámica
Cuando el aprendizaje reacciona, debemos tener una comprensión firme de los prototipos, las clases, los objetos de instancia y este puntero.
En primer lugar, necesitamos saber que el estado no se puede cambiar directamente. Necesitamos usar un api- setState incorporado para cambiarlo, si lo cambiamos directamente. Por ejemplo, escribir this.state.isHot = !isHot no tiene ningún efecto. This.setState({isHot:!isHot}) debe escribirse así para que tenga efecto. Además, esta API actualiza el estado fusionando, no sobrescribiendo, y otros datos originales no se perderán.
En segundo lugar, en el constructor, buscamos la función changeWeather en la cadena del prototipo Weather, cambiamos su puntero this y lo asignamos a la demostración para que exista en el objeto de instancia Weather, es decir, this.demo=this.changeWeather.bind. (this ) Esta línea de código le permite usar this.demo para llamar directamente a la función changeWeather que colocamos en el objeto de instancia cuando se activa el clic en la función de devolución de llamada del evento de clic agregado al dom virtual en rendr, sin tener que busque changeWeather a lo largo de la cadena de prototipos y seleccione changeWeather directamente en este objeto de instancia, lo que resuelve el problema de que el sistema en la clase activa automáticamente el modo estricto local, lo que hace que apunte a subdefinido y no se puede llamar a changeWeather.
Finalmente, está la cuestión de cuántas veces se llaman las funciones constructora, render y changeWeather. Cuando se crea una instancia de la clase creada, el constructor se llamará una vez y no se volverá a llamar. En este momento, se llama a render una vez para generar DOM virtual y se llama a render una vez cuando se actualizan los datos. La función de devolución de llamada changeWeather controla la actualización de datos, por lo que cada vez que activamos un evento de clic y se actualiza el estado, se llamará a changeWeather.
El código se muestra a continuación:
class Weather extends React.Component {
//构造器调用，仅仅1次
constructor(props){//使用构造器和super关键字，从父类继承props
super(props)
//初始化状态
this.state = {isHot:false}//为实例中的State
//在Weather原型链上寻找changeWeather这个函数，并改变其this指向，赋值给demo使其存在在Weather的实例对象上
this.demo = this.changeWeather.bind(this)
}
//render调用 1+n次，1次是初始化那次，n次是数据更新了几次
render() {
//结构赋值
const {isHot} = this.state
//为h1标签添加点击事件和相应的回调函数changeWeather
//此处写成this.demo，直接调用实例对象上的changeWeather函数
return <h1 onClick={this.demo}>今天天气很{isHot?'炎热':'凉爽'}</h1>
}
//changeWeather是，点几次它就调用几次
changeWeather(){
//changeWeather放在Weather的原型对象上，供实例调用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为underfined
const isHot = this.state.isHot
//状态不可以直接的更改，要借助一个内置的api(setState)去更改
// 这行就是直接更改：this.state.isHot = !isHot
this.setState({isHot:!isHot})//使用setState来更改状态，且更新是一种合并不是替换，不会丢失原有数据
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))El efecto es que cuando haces clic en el texto, las palabras hot y cool alternarán.
1.3 simplificación del código estatal
El código anterior es demasiado engorroso de escribir y no tiene por qué ser tan problemático al usar reaccionar, por lo que simplificamos el código anterior.
Primero, eliminamos el constructor y escribimos la declaración de asignación directamente en la clase. Al igual que escribirla en el constructor, existe directamente en el objeto de instancia.
Luego usamos el atributo de función de flecha de changeWeather y lo asignamos a changeWeather. La función de flecha no tiene su propio esto. Cuando se trata de señalar, esto es consistente con su función externa, por lo que esto en this.setState({isHot:!isHot}) a continuación apunta directamente al objeto de instancia de Weather, asegurando que la instancia se pueda cambiar directamente de estado en el objeto.
El código se muestra a continuación:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component {
state = {isHot:false}//直接在类里面写赋值语句，与在构造器中写一样
render() {
const {isHot} = this.state
return <h1 onClick={this.demo}>今天天气很{isHot?'炎热':'凉爽'}</h1>
}
//自定义函数，必须使用赋值语句和箭头函数
changeWeather = ()=>{//此处必须使用箭头函数，箭头函数没有自己的this，在涉及this指向时候，其this和其外侧函数一致
const isHot = this.state.isHot
this.setState({isHot:!isHot})//所以此处this指向，是Weather的实例对象
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>1.4 resumen de estado
1.el estado es el atributo más importante en el objeto componente y el valor es el objeto (puede contener múltiples combinaciones clave-valor)
2. Los componentes se denominan "máquinas de estado" y la visualización de la página correspondiente se actualiza actualizando el estado del componente (volviendo a representar el componente).
3. Entre los componentes definidos por la clase, el estado es uno de sus tres atributos principales, los otros dos son accesorios y referencias.
Nota fuerte:
1. Esto en el método de representación del componente es el objeto de instancia del componente.
2. ¿Cómo resolver el problema de que este punto del método personalizado en el componente no está definido?
(1), fuerce la vinculación de esto, a través de la vinculación del objeto de función
(2), use la función de flecha
3. Los datos de estado no se pueden modificar ni actualizar directamente. Utilice una API incorporada (setState) para cambiarlos.