1.目标

能够实用props接收数据
能够实现父子组件之间的通讯
能够实现兄弟组件之间的通讯
能够给组件添加props校验
能够说出生命周期常用的钩子函数
能够知道高阶组件的作用

2.目录

组件通讯介绍
组件的props
组件通讯的三种方式
Context
props深入
组件的生命周期
Render-props和高阶组件

3.react tool

安装 React Devloper Tools 插件

4.组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整
的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要
共享数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通
讯。

5.组件的props

A. 组件是封闭的，要接收外部数据应该通过props来实现
B. props的作用：接收传递给组件的数据
C. 传递数据：给组件标签添加属性
D. 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

function Hello(props) {
  return <div>接收到的值：{props.name}</div>;
}

class Hello1 extends React.Component {
  constructor() {
    super();
  }
  render() {
    return <div>接收到的值：{this.props.name}</div>;
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Hello name="张三"></Hello>
    <Hello1 name="李四"></Hello1>
  </React.StrictMode>
);

5.1 特点

A. 可以给组件传递任意类型的数据
B. props是只读的对象，只能读取属性的值，无法修改对象
C. 注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法再构造函数中获取
到props!

class Hello2 extends React.Component {
	constructor(props) {
		//推荐将props传递给父类构造函数 ？？？
		super(props)
	}
render() {
	return (
		<div>
			接收到的数据：{this.props.age}
		</div>
		)
	}
}
ReactDOM.render(<Hello2 name='rose' age={22}></Hello2>,document.getElementById('root'));

5.2 其他类型数据

class Hello2 extends React.Component {
	constructor() {
		//推荐将props传递给父类构造函数
		super()
	}
render() {
	return (
		<div>
			接收到的数据：{this.props.age} {this.props.tag}
		</div>
	)
}
ReactDOM.render(<Hello2 name='rose' age={22} colors={['red', 'yellow', 'blue']}
fn={() => { console.log('这是一个函数') }} tag={<p>这是一个P标签</p>}></Hello2>,
document.getElementById('root'));

6.组件通讯的三种方式

组件之间的通讯分为3种：
A. 父组件->子组件
B. 子组件->父组件
C. 兄弟组件

6.1 父组件传递数据给子组件

A. 父组件提供要传递的state数据
B. 给子组件标签添加属性，值为state中的数据
C. 子组件中通过props接收父组件中传递的数据

.parent {
  background-color: skyblue;
  height: 200px;
}

.child {
  background-color: pink;
  height: 100px;
}

// 父组件给子组件传值
class Parent61 extends React.Component {
  state = { lastName: "练" };
  render() {
    return (
      <div className="parent">
        父组件：{this.state.lastName + "凝"}
        <Child61 lastName="道济"></Child61>
      </div>
    );
  }
}

const Child61 = (props) => {
  return (
    <div className="child">子组件接受到父组件传的值：{props.lastName}</div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <Parent61></Parent61>
);

6.2 子组件传递数据给父组件

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
A. 父组件提供一个回调函数（用于接收数据）
B. 将该函数作为属性的值，传递给子组件
C. 子组件通过props调用回调函数
D. 将子组件的数据作为参数传递给回调函数
注意：回调函数里面的this指向问题

// 6.2
class Parent extends React.Component {
  state = {
    sonMsg: "",
  };
  getChildMsg = (msg) => {
    this.setState({
      sonMsg: msg,
    });
  };
  render() {
    return (
      <div>
        子组件传过来的值：{this.state.sonMsg}
        <Child getMsg={this.getChildMsg}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  state = {
    sonMsg: "react牛掰！！！",
  };
  sendMsg = () => {
    this.props.getMsg(this.state.sonMsg);
  };
  render() {
    return (
      <div>
        <button onClick={this.sendMsg}>向父组件传值</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(<Parent></Parent>);

6.3 兄弟传值

A. 将共享数据提升到最近的公共父组件中，由公共父组件管理这个状态
B. 思想：状态提升
C. 公共父组件职责：1.提供共享状态 2.提供操作共享状态的方法
D. 要通过的子组件只需通过props接收状态或操作状态的方法

class Parent63 extends React.Component {
  // 提供公共状态
  state = {
    count: 0,
  };
  // 提供修改状态的方法
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  render() {
    return (
      <div>
        <Child631 count={this.state.count}></Child631>
        <Child632 onIncrement={this.onIncrement}></Child632>
      </div>
    );
  }
}
const Child631 = (props) => {
  return <div>计数器{props.count}</div>;
};
const Child632 = (props) => {
  return <button onClick={() => props.onIncrement()}>+1</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <Parent63></Parent63>
);

6.4 context

思考：App组件要传递数据给Child组件，该如何处理
A. 处理方式：使用props一层层组件往下传递（繁琐）
B. 更好的姿势：使用Context
C. 作用：跨组件传递数据（比如：主题、语言等）

6.4.1 使用步骤

A. 调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件。
B.使用Provider组件作为父节点
C. 设置value属性，表示要传递的数据
D. 调用Consumer组件传递数据

.app64{
background-color: red;
padding:20px;
}
.node64{
background-color: yellow;
padding:20px;
}
.subNode64{
background-color: green;
padding:20px;
}
.child64{
background-color: purple;
padding: 20px;
}

// 创建context得到两个组件
const { Provider, Consumer } = React.createContext();

class App64 extends React.Component {
  render() {
    return (
      <div>
        <Provider value={"hello"}>
          <div className="app64">
            <Node64></Node64>
          </div>
        </Provider>
      </div>
    );
  }
}

const Node64 = () => {
  return (
    <div className="node64">
      <SubNode64></SubNode64>
    </div>
  );
};

const SubNode64 = () => {
  return (
    <div className="subNode64">
      <Child64></Child64>
    </div>
  );
};

const Child64 = () => {
  return (
    <div className="child64">
      <Consumer>{(data) => <span>我是子节点{data}</span>}</Consumer>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App64></App64>);

6.4.2 总结

A. 如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯
B. Context提供了两个组件：Provider和Consumer
C. Provider组件：用来提供数据
D. Consumer组件：用来消费数据

7.props深入

7.1 children属性

A. children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性
B. children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

const App1 = (props) => {
  console.log(props);
  return (
    <div>
      <h1>组件标签的子节点：</h1>
      {props.children}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <App1>
    <p>我是p标签</p>
    {/* {() => {
      console.log(123);
    }} */}
  </App1>
);