Proceso del ciclo de vida:
1. Ingrese a la visualización de renderizado inicial por primera vez: render ()
- constructor (): crea un objeto para inicializar el estado
- componentWillMount (): se insertará la devolución de llamada
- render (): se utiliza para insertar devolución de llamada DOM virtual
- componentDidMount (): la devolución de llamada se ha insertado
Estado de actualización cada vez: this.setState ()
- componentWilIUpdate (): la devolución de llamada se actualizará
- render (): actualizar (volver a renderizar)
- componentDidUpdate (): la devolución de llamada se ha actualizado
3. Quitar componentes
- ReactDOM.unmountComponentAtNode (document.getElementById ('ejemplo'))
- Se eliminará la devolución de llamada del componente componentWillUnmount ()
castaña:
/*
需求: 自定义组件
1. 让指定的文本做显示/隐藏的动画
2. 切换时间为2S
3. 点击按钮从界面中移除组件界面
*/
class Animation extends React.Component{
constructor(props){
super(props)
this.state = {
opacity: 1
}
}
componentDidMount(){
let {
opacity} = this.state
setInterval(() => {
if(opacity*10 >0){
opacity -= 0.1
} else {
opacity = 1
}
this.setState({
opacity})
}, 500)
}
render(){
let opacity = this.state.opacity
return(
<div style={
{
opacity}}>
gogoogogogogogogogog
</div>
)
}
}
ReactDOM.render(<Animation/>, document.getElementById('example'))
Algoritmo de diferencia
Minimice el redibujado de la página
. Compare la parte cambiada antes y después del cambio. La parte que se compara se renderizará y las otras partes que no han cambiado no se renderizarán.
Hay un problema en este caso
Esto no se puede escribir como antes y reportará un error <a href="javascript:;"
. Debe escribirse así en React.
No lo olvides, aquí prop se pasa por valor, no es una tarea deconstruida, solo escribe el nombre.
