React 内部数据 state v.s. 外部数据 props

import React from "react";
import ReactDOM from "react-dom";
function App() {
  let n = 1;
  return (
    <div className="App">
      爸爸
      <Son messageForSon="儿子你好" />    <!--如果给子组件需要传递变量：messageForSon={n}-->
    </div>                               <!--如果给子组件需要传递函数：onClick={this.onClick}-->
  );                                     <!--外部数据被包装为一个对象{messageForSon:'',...}-->
}
class Son extends React.Component {      <!--类组件-->
  constructor(props){    <!--如果没有额外的代码，这三行可省略，不写也可以拿到外部数据-->
    super(props);        <!--如果没有额外的代码，这三行可省略，不写也可以拿到外部数据-->
  }                      <!--这样做的效果就是，this.props就是外部数据的地址了-->
  render() {
    return (
      <div className="Son">
        我是儿子，我爸对我说「{this.props.messageForSon}」<!--this.props.xxx 获取外部数据-->
        <Grandson messageForGrandson="孙贼你好" />       <!--如果给子组件需要传递变量：messageForSon={n}-->
      </div>
    );
  }
}
const Grandson = props => {    <!--函数组件可以接收外部传来的 props，这里的props是形参-->
  return (
    <div className="Grandson">
      我是孙子，我爸对我说「{props.messageForGrandson}」<!--props.xxx 获取外部数据-->
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";
import ReactDOM from "react-dom";
function App() {
  return (
    <div className="App">
      爸爸
      <Son />
    </div>
  );
}
class Son extends React.Component {//类组件
  constructor() {                  //需要在constructor()构造器中
    super();
    this.state = {                 //通过 this.state = {} 的形式声明内部数据
      n: 0
    };
  }
  add() {                                   //this.state.n += 1 不行，不像Vue
    this.setState({ n: this.state.n + 1 }); //因为React没有对内部数据做监听，只能调用 this.setState()
                                            //最好使用这种：this.setState( (state) =>{ return state.n + 1});
  }                                         //因为这种方式写两遍可以实现 +2，但是对象的方式却不行
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}    <!--类组件通过 this.state.n 的形式读数据-->
        <button onClick={() => this.add()}>+1</button>
        <Grandson />
      </div>
    );
  }
}
const Grandson = () => {
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">
      孙子 n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

class Son extends React.Component {
  constructor() {
    super();
    this.state = {   //state中含有 m 和 n 两个数据
      n: 0,
      m: 0
    };
  }
  addN() {
    this.setState({ n: this.state.n + 1 });    //m 不会被覆盖为 undefined，会自动延用之前的值
  }              //或者写成：this.setState({...this.state ， n: this.state.n + 1 })
  addM() {
    this.setState({ m: this.state.m + 1 });    //n 不会被覆盖为 undefined，会自动延用之前的值
  }              //或者写成：this.setState({...this.state ， m: this.state.m + 1 })
  render() {
    return (
      <div className="Son">
        n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>  <!--点击按钮调用 addN() 使 n+1-->
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>  <!--点击按钮调用 addM() 使 m+1-->
      </div>
    );
  }
}

const Grandson = () => {
  const [n, setN] = React.useState(0);    //不推荐将 m、n 写到一个对象中
  const [m, setM] = React.useState(0);    //那样在设置单个属性时，另一个会被置为 undefined
  return (                                //const [state, setState] = React.useState({n:0,m:0}); 不推荐
    <div className="Grandson">            //如果这种形式，在每次setState时需要：setState({...state,n:state.n+1})
      n:{n}
      <button onClick={() => setN(n + 1)}>n+1</button>
      m:{m}
      <button onClick={() => setM(m + 1)}>m+1</button>
    </div>
  );
};