React基础

React包含react元素和react组件

react元素

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

react组件

const Div = ()=>React.createElement('div'..)

react组件分为函数组件和类组件

一、函数组件

function MyComponent(props) {
  return  <div>{props.name}</div>
}

二、类组件

class MyComponent extends React.Component {
    constructor() {
    super()
  }
  render() {
    return <div>{this.props.name}</div>
  }
}

渲染组件

const root = document.getElementById('root')
ReactDom.render(<MyComponent name='frank' />, root)

三、更改类组件内部值

class Myclass extends React.Component {
  constructor() {
    super()
    this.state = {
      n: 0,
    }
  }
  render() {
    return (
      <div>
        <div>加一操作：{this.state.n}</div>
        <button onClick={() => {this.add()}}>
          +1
        </button>
      </div>
    )
  }
  add() {
  // 方法一
    this.setState((state, props) => {
       return (state.n += 1)
    })
  // 方法二
    this.setState({
      n: this.state.n + 1,
    })
  }
}

注意：一、this.state不能直接改，要改只能调用setState来产生新的对象---遵循react数据不可变原则
注意：二、setState是一个异步改变state的过程。。。要想更清晰的使用setState可用方法一

四、更改函数组件内部值

function MyFun() {
  // n是初始值0
  // setN 不会改变n的值，只会产生一个新n
  let [n, setN] = React.useState(0) //React.useState(0) 返回初始值0 和一个setN操作n的函数
  return (
    <div>
      <span>{n}</span>
      <button onClick={() => {setN(n + 1)}}>
        +1
      </button>
    </div>
  )
}

五、更改深层内部值

由于react更新视图是传入一个全新的视图，那在更改数据的时候相当于是传入的更改值和undefined，就会造成数据错误（在类组件setState会自动合并第一层属性，函数组件则完全不会）
解决：使用ES6的扩展运算符（...）或Object.assign进行合并
类组件

this.setState({
   obj: {
       ...this.state.obj,
       width: 200,
   },
})

函数组件

let [state, setState] = React.useState({ a: 1, b: 2 }) 

onClick={() => {
   setState({ ...state, a: state.a + 1 })
}}

六、两种编程模型

两种编程模型.png