基本使用

react 不是一个完整的 MVC 框架，它是 V ( View ) 那一层。

jsx使用

  • 表达式
  • 判断
  • 循环

bind this 事件

this默认为undefined

  1. this.handleChange = this.handleChange.bind(this)
  3. handleChange (){} // this默认为undefined
  5. // 静态方法
  6. handleChange = () => {
  7.     this.setState({
  8.       name: 'wq'
  9.   })
  10. }

event

注意： 和vue的event不一样，vue是原生event（MouseEvent）

  1.  <a href="https://www.baidu.com" onClick={(event) => {
  2.     event.preventDefault()
  3.     event.stopPropagation()
  4.     console.log(event)
  5.     console.log(event.nativeEvent)
  6.     // 此处event不是原生的event，而是组合event（SyntheticBaseEvent）
  7.   }}>click me</a>

event.nativeEvent 才是原生事件
所有事件都被绑定到 document 上（React16），而 React17 是绑定到 root 组件上（有利于多个react版本并存，例如微前端）
和 DOM 事件不一样，和 vue 事件也不一样

传递自定义参数

受控组件

  1.  <label htmlFor="inputName">姓名：</label>
  2. <input type="text" id="inputName" value={name} onChange={(e) =>  setName(e.target.value)} />

非受控组件

父子组件通信

  • props 传递数据
  • props 传递函数
  • props 类型检查
    • PropTypes 库

状态（数据）提升

setState（重要）

  • 不可变值
    • 设置时，不能影响到之前的值 ```jsx // 不要直接修改 state， 使用不可变值 this.state.count++ // 错误

// 数组， 对象 this.setState({ list1: this.state.list1.concat(100) }) // … , concat, slice, filter

this.setState({ obj: Object.assign({}, this.state.obj, {a: 100}), obj1: {…this.state.obj, a: 100}, })

  2. - **可能是异步更新<br />**
  3. ```jsx
  4. constructor(props) {
  5.     this.state = {
  6.         count: 0
  7.     }
  8. }
  10. this.setState({
  11.     count: this.state.count + 1
  12. }, () => {
  13.   // vue的nextTick
  14.     console.log('回调', this.state.count) // 1
  15. })
  17. console.log(this.state.count) // 0, 拿不到最新的值，异步的
  19. // setTimeout 同步的
  20. setTimeout(() => {
  21.     this.setState({
  22.     count: this.state.count + 1
  23.   })
  24.   console.log('setTimeout', this.state.count) // 1 , 此处同步
  25. }, 0)
  1. import React from "react";
  3. interface Props {}
  4. interface StateType {
  5.   count: number;
  6. }
  8. class Header extends React.Component<Props, StateType> {
  9.   constructor(props: Props) {
  10.     super(props);
  11.     this.state = {
  12.       count: 0,
  13.     };
  14.   }
  16.   bodyClickHandler () {
  17.     this.setState({
  18.       count: this.state.count + 1,
  19.     });
  20.     console.log("count in body event", this.state.count);
  21.   }
  23.   componentDidMount() {
  24.     // 自定义DOM事件，setState同步的
  25.     document.body.addEventListener("click", this.bodyClickHandler);
  26.   }
  28.   componentWillUnmount() {
  29.     // 及时销毁
  30.     document.body.removeEventListener('click', this.bodyClickHandler)
  31.   }
  33.   render() {
  34.     return <div>111</div>;
  35.   }
  36. }
  • 可能会被合并
    • 传入对象，会被合并（类似 Object.assign），执行结果只一次 +1
    • 传入函数，不会被合并
      1. // 传入对象，会被合并，执行结果只一次 +1 （类似 Object.assign）
      2. this.setState({
      3. count: this.state.count + 1,
      4. });
      5. this.setState({
      6. count: this.state.count + 1,
      7. });
      8. this.setState({
      9. count: this.state.count + 1,
      10. }); // 1
      1. // 传入函数，不会被合并，执行结果+3
      2. this.setState((prevState, props) => {
      3. return {
      4. count: prevState.count + 1,
      5. }
      6. });
      7. this.setState((prevState, props) => {
      8. return {
      9. count: prevState.count + 1,
      10. }
      11. });
      12. this.setState((prevState, props) => {
      13. return {
      14. count: prevState.count + 1,
      15. }
      16. });

组件生命周期

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

image.png
image.png