react讲解（组件，生命周期以及受控组件）

---

前言

今天我们一起来学习react 中的组件，以及它们组件与组件间的通信方式。

---

一、组件的通信原理

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

​ 父传子: 把数据添加到子组件,然后子组件从props属性中,获取父组件传来的数 据;

​ 子传父:在父组件中定义相关数据的操作方法,把该方法传递给子组件,在子组件中传递信息

state 和 setState

state 中存放的是数据
setState(updater, [callback])用来修改state里面的值
updater: 更新数据 function/object
callback: 更新成功后的回调函数
异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
浅合并 Objecr.assign()

二、组件分类

1.类组件

1.组件类必须继承 React.Component
2.组件类必须有render 方法
3.render 方法的return 后定义组件的内容

代码示例

class App extends Component {
   


  state= {
   
    nub:20,name: "折耳猫",sex:"kaiaia"
  }

  // state ={nub:nub+1 }

  // 类式组件中，定义constructor ,一定需要接受props，调用super
  // constructor(props) {
   
  //   super(props);
  //   this.state = {
   
  //     nub:0
  //   }
  // }
  setAge= ()=>{
   
    this.setState({
   
      nub:this.state.nub+1
    })
  }



  setName=()=>{
   
    this.setState({
   name:"可爱"})
  }
  render(){
   
    let {
   nub} = this.state;
    return (<div>
              {
   }
              <p>{
   this.state.name}</p>
              <p>{
   this.state.nub}</p>
              <button onClick={
   ()=>{
   
                this.setAge()
                this.setName()
              }}>长一岁</button>
          </div>)
  }
}
 

export default App;

记得导出

2.组件中父子组件的通信

代码示例

App.js

import React,{
   Component} from "react";

import FriendList from "./FriendList"

class App extends Component {
   



  state ={
   
     name: