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