React学习总结（一）：组件比如Vue中，一个构造选项就可以表示一个组件。上述两个组件在 React 里是等效的。

前言，

好久没学习了，现在正式开始学习React啦~

之前有大概了解过React，了解过React的实现原理，所以我打算直接从 组件 来开始我的React学习之旅

元素与组件

React元素：

const div = React.createElement("div",...)

React组件：

const Div = () => React.createElement("div",...)

元素和组件的区别就在于组件必须返回的是一个函数，并且命名首字母要大写！

什么是组件

用生活中的例子就是：能和其他物件组合在一起的物件就是组件，
比如Vue中，一个构造选项就可以表示一个组件。
在React官方中说到，组件的本质就是JavaScript函数

React的俩种组件：函数组件与 class 组件

函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

使用方法：

<Welcome name="Wangpf"/>

class组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

使用方法：

<Welcome name="Wangpf"/>

上述两个组件在 React 里是等效的。

那么 `<Welcome />` 会被翻译为 React.createElement(....)

我用 babel online 来演示一下

div

总结：

如果传入的是一个字符串：比如 "div"，则会去创建一个div
如果传入的是一个函数，则会去调用该函数，获取其返回值
如果传入的是一个类，则会在类前面加个 new（这会导致执行constructor），获取一个组件对象，然后调用对象的render方法，获取其返回值

小试牛刀

分别用俩种组件方式来写props(外部数据，传参)、state（内部数据）：

import React from 'react';
import "./style.css";

function App() {
  return (
    <div className="App">
      父组件
      <Son messageForSon="我是你的老大" />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super()
    this.state = {
      n: 0
    }
  }

  render() {
    return (
      <div className="Son">
        子组件
        <span> n: {this.state.n} </span>
        <button onClick={() => { this.add() }}> +1</button>
        <p>我是子组件，父组件对我说：{this.props.messageForSon}</p>
        <Grandson messageForGrandson="我是你的老大,你是我老大的孙子" />
      </div>
    )
  }

  add() {
    // this.setState({
    //   n: this.state.n + 1
    // })

    this.setState(state => {
      const n = state.n + 1
      // console.log(n);
      return { n }
    })
  }
 }

const Grandson = (props) => {
  const [n, setN] = React.useState(0)
  return (
    <div className="Grandson">
      孙组件
      <span> n : {n} </span>
      <button onClick={() => { setN(n + 1) }}> +1</button>
      <p>我是孙组件，子组件对我说：{props.messageForGrandson}</p>
    </div>
  )
}

export default App

俩种组件的书写方式

总结：

使用props（外部数据）

类组件会直接读取属性 this.props.xxx
函数组件会直接读取参数 props.xxx

使用state（内部数据）

类组件用 this.state 读， this.setState 写
函数组件用 useState 返回数组，第一项是读，第二项是写
- const [n, setN] = React.useState(0)

React学习总结（一）：组件

前言，