Reagir aprendendo --- estado estado

Reagir aprendendo - estado estado

1. Uso básico, inicialização

O estado inicial do componente é definido no método de construção do componente;

O estado pode ser acessado com this.state.xxx no modelo de componente;

2. Modificar status

修改组件状态,必须用 this.setState({ xxx:yyy })

this.setState({ xxx:yyy }) pode ser colocado em qualquer lugar onde o código js é executado e não pode ser executado na renderização

Em React, se o processamento de eventos for acionado por React (como o processamento de eventos acionado por onClick), chamar setState não atualizará this.state de forma síncrona e outras chamadas de setState executarão this.state de forma síncrona. O chamado "além disso" refere-se a ignorar o manipulador de eventos adicionado diretamente pelo React por meio de addEventListener e as chamadas assíncronas geradas por meio de setTimeout/setInterval.

handleClick(index) {
    
    
    // setState() 更新组件状态
    // setState() 会将传入的参数属性和原有的组件state进行合并
    // setState() 会触发组件更新，组件更新时当前组件的render方法会立即重新执行，render方法内的所有js代码都会重新执行

    // this.state.currentIndex = index; 这样无法触发组件更新

    // 特点：只要调用setState 当前组件一定更新(render方法调用了)
    // 特点：只要调用setState 对当前组件状态更新是异步的，不能在setState 之后立即获取state最新的值，想要获取只能在setState 的第二个参数的回调函数中获取
    console.log('handleclick');
    this.setState({
    
    
      currentIndex: index
    }, () => {
    
    
      console.log(this.state.currentIndex);
    })
    // console.log(this.state.currentIndex); 不要在这里获取state最新的值，因为获取不到
  }

3. A diferença entre props e state

props é um fluxo de dados passado de um componente pai para um componente filho, e esse fluxo de dados pode ser passado até os componentes descendentes. O estado representa o estado interno de um componente.

​ Alterações em props ou no estado interno do componente farão com que o componente seja renderizado novamente. Como ambas as alterações podem fazer com que o componente seja renderizado novamente, somente entendendo o significado de props e state podemos tomar uma boa decisão sobre quando use adereços ou estado.

​ Para o próprio componente, as props são somente leitura e o estado é mutável.