JSX
JSX puede prevenir ataques de inyección XSS.
Antes de renderizar, React DOM formateará todos los valores en JSX para garantizar que los usuarios no puedan inyectar ningún código fuera de la aplicación. Antes de renderizar, todos los datos se escapan al procesamiento de cadenas .
Representación de elementos
Actualizar elementos renderizados
Los elementos de React no son mutables. Una vez que crea un elemento, no puede modificar sus elementos secundarios ni ningún atributo. La única forma de actualizar la interfaz de usuario es crear un nuevo elemento y pasarlo al método ReactDOM.render (). Pero grande La mayoría de las veces, el método render solo se llamará una vez
Componentes y atributos
Componentes
Los componentes se dividen en componentes funcionales y componentes de clase
.
function Welcome(props) {
return <h1>Hello, {
props.name}</h1>;
}
Clase ES6:
class Welcome extends React.Component {
render() {
return <h1>Hello, {
this.props.name}</h1>;
}
}
Propiedad, Props es de solo lectura
Los accesorios son de solo lectura. No importa si declaras un componente en una función o método de clase, no puedes modificar sus propios accesorios.
Una función que no cambia la entrada se llama función pura. Los
componentes de React deben ser funciones puras y está prohibido modificar sus propios accesorios
estado estado
El estado solo se puede setState()establecer mediante métodos, y el único this.statelugar que se puede asignar es el constructor. La
actualización del estado es asincrónica y no puede confiar en el valor de uno para actualizar el otro . Puede realizar el siguiente procesamiento en la función de devolución de llamada
Cualquier estado siempre es propiedad de un componente específico, y cualquier dato o UI derivado de ese estado solo puede afectar a los componentes debajo del árbol.
Manejo de eventos
Nombramiento de casos de camello, pasando una función como un controlador de eventos
En el código js, la función del controlador de eventos devuelve un falso para evitar el evento predeterminado, pero en React, se debe llamar manualmente e.preventDefault()para evitar el evento predeterminado
Cuando React, generalmente no necesita llamar addEventListenerpara agregar oyentes de eventos en el elemento DOM que se crea. En su lugar, solo proporcione un oyente cuando el elemento se procese inicialmente.
Al llamar a los controladores de eventos, asegúrese de que apunte al componente actual, por lo que para vincularlo, puede utilizar los siguientes métodos
- enlazar 绑定 this.handleClick () = this.handleClick.bind (esto)
- Utilice la función de flecha cuando llame a la función onClick = ((e) => this.handleClick (e))
- La función usa directamente func = () => ()
¿Por qué el manejo de eventos en react vincula esto?
No he estudiado este problema en profundidad antes, y lo estudié cuidadosamente después de volver a leerlo.
Todos sabemos que este punto en la función js ordinaria es el objeto que llama a la función y señala a quién está cerca. En el modo
no estricto, esto apunta a por defecto En el
modo estricto de la ventana de objeto global , esto no está definido
La función de flecha ya ha determinado la dirección de esta en el momento de la definición, y no cambiará según quien la llame.
En base a esto, reaccionamos directamente ¿por qué onClick={this.handleClick}no?
La razón fundamental es reaccionar en un dom dom virtual, JSX es React.createElement(component, props, ...children)azúcar sintáctico, cuando en realidad llamamos código de función de evento
render(){
return (<a href="#" onClick={
this.handleClick}>click me </a>
})
Se analiza en
render(){
return React.createElement(
"a",
{
onClick: this.handleClick},
"click me"
);
}
En dicho código, onClick = {function}en onClicksí mismo es una "variable intermedia", que this.handleClickse pasa a otra función como una devolución de llamada , y esto se pierde en este momento. Dé un ejemplo simple
class Cat {
sayThis () {
console.log(this);
}
exec (cb) {
cb();
}
render () {
this.exec(this.sayThis);
}
}
const cat = new Cat();
cat.render();
Cuando sayThis se pasa como parámetro a exec como una función de devolución de llamada, esto se ha perdido,
por lo que debemos vincularlo en el procesamiento de eventos de react
Formar
Componente controlado
Aquellos que han usado vue saben que vue es un flujo de datos de enlace bidireccional. El elemento de datos en el formulario solo se puede vincular mediante v-model,
pero react es un flujo de datos unidireccional. Si desea vincular un cuadro de entrada en el formulario, Un estado debe ser realizado por componentes controlados.
handleChange(event) { this.setState({value: event.target.value}); }
<input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />
Utilice la función de procesamiento onChange del formulario para actualizar los datos de entrada. En esta función, puede realizar un procesamiento especial en los datos de entrada, que está más en línea con la filosofía de diseño de reaccionar para dar a los usuarios una mayor libertad.
Al final
Recuerde que leer código es mucho más importante que escribir código. El código modular y claramente estructurado es más propicio para la lectura. Al crear una biblioteca de componentes grande, apreciará la modularidad, la estructura clara y el código reutilizable, y sus líneas de código disminuirán gradualmente.