React组件

1.类组件和函数组件：

• 函数返回值是元素，这个东西就叫做组件

• 函数名第一个必须要大写 类组件：class 类名 继承 React.Component render函数用来渲染组件视图。return 一个元素 bable将代码翻译成js

类使用方式，不会就把3~10行代码背下来。 extends(继承)。 constructor初始化一个state(其实也就是data)，它的值是n:0.

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

import "./styles.css";

class App extends React.Component {
  constructor(){
    super();
    this.state={
      n:0
    };
  }
  add(){
   this.setState({n:this.state.n+1}) 
  }
  render(){
    return (
      <div className="App">
        n{this.state.n} 
        <button onClick={()=>this.add()}>+1<button/>
      </div>
    );
  } 
}

//声明一个state初始值为0，用n代替这个0，用setN对这个0进行修改。setN后得到一个新的n.
const [n,setN] = React.useState(0);

2.props(外部数据)和state(内部数据)

• 类组件传props的方式;
• 函数组件传props的方式;
• 类组件传送state,需要使用setState告诉react数据发生了变化，react里数据是不可变的，所以它产生了一个新的对象。
• 一般会将setState写成一个函数，setState更新过程是异步的。
• 函数组件传送state

3.vue和react模型对比。

• react{}花括号之内都是js语法，花括号之外是标签。

4.复杂state

5.事件绑定

//React事件绑定终极写法；
addN = ()=>this.setState{(n:this.state.n+1)}
//使用
this.addN()