React_02 组件的生命周期以及组件间通信

state 和 setState

• setState(updater, [callback])
  • updater: 更新数据，里面的才参数可以是对象，也可以是函数，但是函数必须返回一个对象，对象里面的是需要修改的属性的值
  • callback: 更新成功后的回调 function
  • 异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
  • 浅合并 Objecr.assign()
  • 调用 setState 之后，会触发生命周期，重新渲染组件
    示例： import React, { Component, Fragment } from ‘react’;

class App extends Component{
   
  state={
   
    name:"kkb",
    age:1
  }
  changeName=()=>{
   
    this.setState({
   
      name:"ass"
    })
  }
  addAge=()=>{
   
    let {
   age}=this.state
    this.setState({
   
      age:++age
    })
  }
  render(){
   
    let {
   name,age}=this.state;
    return <Fragment>
      <p>{
   name}</p>
      <button onClick={
   this.changeName}>改变名字</button>
     <p>{
   age}</p>
      <button onClick={
   this.addAge}>长大一岁</button>  
    </Fragment>
  }
}
export default App;
{
   /*
注意：
## this.setState(obj||fn,[callback]),callback是完成后的回调函数
     object:修改对象里面的值，setState会自动调用合并obj的状态
    fn：执行setState的时候会执行fn,fn函数必须返回一个对象，对象里面存储我们想要修改的状态
## 修改state会调用render方法重新渲染视图
## 在使用setState时，要注意setState是一个异步方法，如果在setState时去获取state的值，拿到的还是之前的值
## 多个setState同时执行，会被合并执行，执行一次render
*/}

组件间通信

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

• 父级向子级通信
  把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据

state={
   
    name:"kkb"
}

然后把数据传递给子级：

   <Children name={
   name}/>

• 子级向父级通信
  在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息
  在父级中定义修改状态的方法：

  changeName=(newName)=>{
      
    this.setState({
   
        name: newName
    })
}

传递给子级

  <Children name={
   name} changeName={
   this.changeName}/>