React入门

1 第一个组件

import * as React from 'react';
import { observer } from 'mobx-react';


export default class HelloMessage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.children}
        </div>
      );
    }
  }
  

注意：

1. 类如果继承可以不写 constructor()//进行初始化操作才用，如添加指定属性
2. A继承了B，且写了constructor，就必须写super(),而且super必须在最前面
3. 实例可以直接调用父方法，也可以重写

class Person{
constrctore(name,age){
this.age=age
this.name=name
}
speak(name,age){
console.log(name+age+'岁了')
}
}


class Student extends Person{
constrctore(name,age,grade){
super(name,age)
this.age=age
}

componentDidMount() {
    console.log("组件第一次加载完毕 我第一次和你见面")
  })

speak(name,age,grade){
console.log(name+age+'岁了，在读'+grade)
}
}

2 函数式组件

2.1基础

this指向window，想要使用props、state请在函数声明接住
基础使用useState
实战：简单弹窗

缺点/挑战：

• 无法处理异步更新状态的情况。当需要在组件中进行异步操作，并根据异步操作的结果更新状态时，使用 useState
  可能会导致状态更新不及时或出现其他问题。
• 无法处理复杂的状态逻辑。
  • 当组件的状态比较复杂或需要多个状态协同工作时，使用 useState可能会导致代码变得混乱和难以维护。
  • 例如，如果需要在组件中管理一个数组，并且需要对数组进行添加、删除、修改等操作，使用 useState可能会导致代码变得冗长和难以理解。eg.对数组添加
    • 错误做法：
      • list.push(item)
      • setList(list)
    • 原因：对数组，不能期望使用list.push()来修改状态 ==>修改了值却无法触发视图更新。 useStates使用旧的更新
    • 正确做法：setList([…list,item])
    • 总结：一维的尚且如此，越高维的数组、对象修改起来越痛苦。

解决方案：

• 对于异步更新状态的需要，通过使用 useEffect 来实现。
• 对于复杂的状态逻辑，使用 useReducer来处理，useReducer 可以将状态逻辑封装在 reducer 函数中，使代码更加清晰易懂。
• 对于大量数据的处理，可以使用useMemo 和 useCallback 来优化性能，避免不必要的计算和渲染。同时，也可以考虑使用虚拟滚动等技术来优化渲染性能。

2.2 伟大的Hook

2.2.1 useEffect

副作用，当依赖发生变化，执行函数

useEffect(函数,[依赖项目数组])

特殊情况：当依赖项目数组为空，表示仅在第一次挂在完毕执行。相当于componentDidMount()
实战：简单弹窗+useEffect

2.2.2 useReducer

useState以状态为单位，useReducer以一次操作为单位

/*初始化*/
[state,dispatch]=React.useReduce(reducer函数，初始状态) /*useReducer*/
reducer函数(state,action){//action对应dispatch传入参数param
		//常使用switch---case条件判断，执行不同操作
}
dispatch(param) //发起一次操作

实战：useReducer实现简单弹窗

2.2.3 useMemo

非必要，是性能优化工具。
缓存计算结果，避免不必要的重复计算。
实战：useMemo实现弹窗

2.2.4 useCallback

非必要，是性能优化工具。
缓存计算函数，避免不必要的重新创建函数。