React Class 组建与函数式组建

关于一些 react 的使用想法，推荐使用sandbox来直接模拟

react Class 组建写法

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      n: 1,
      lastName: "pro",
      firstName: "xiaoy",
    };
  }
  addN = () => {
    this.setState({
      n: this.state.n + 1,
    });
  };
  get name() {
    return this.state.lastName + " " + this.state.firstName;
  }
  set name(newname) {
    const [lastName, firstName] = newname.split(" ");
    this.setState({
      lastName,
      firstName,
    });
  }
  render() {
    return (
      <div className="App">
        <div>{this.props.message}</div>
        <div>{this.state.n}</div>
        <div>{this.name}</div>
        <button onClick={this.addN}>n+1</button>
      </div>
    );
  }
}

ReactDOM.render(<App message="hello" />, rootElement);

简单说下 react 的使用

1. props 拿到传入的值
2. state 定义对象内部的变量
3. 事件处理的时候控制好 this 的指向，并不一定指向对象本身
4. react 的计算属性是基本的 js 语法糖 get/set

react 函数式组建写法

import React, { useState, useEffect } from "react";
import "./styles.css";

const App = (props) => {
  const [n, setN] = useState(1);
  useEffect(() => {
    console.log("++++++", n);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h3>{props.message}</h3>
      <div>NUM:{n}</div>
      <button onClick={() => setN(n + 1)}>n+1</button>
    </div>
  );
};
export default App;

1. Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。
2. 函数性质的组建，没法定义自身的 state，借助 react 官方 hooks，useState 来实现定义 state，并进 n
3. useState 的第二个参数就是为了改变 state 里面的 VAL。
4. useEffect 可以理解为同比生命周期，如果后面传入的不是一个空数组在 MONTED 和 UPDATE 的时候都会触发。在传入空数组的时候，只会在 MOUNED 的时候触发。

两者区别

1. 函数组建基本使用在 react>16.8
2. 大型项目之前的开发基本上使用 class 组建(向下兼容)

类： 1. 有状态(state) 在一个对象上改变同一个内存 2. 3.面向对象

函数： 1. 无状态 2. 函数式的本质就是不能第二次赋值 3. 函数式的好处就是更好的使用数学知识