*错误边界
class ErrorBoundary extends React.Component {
constructor(props){
super(props){
this.state = {
errorInfo: null
};
}
}
static getDerivedStateFromError (error) {
//更新state使下一次渲染可以显示降级UI
return {errorInfo: true}
}
//报错
componentDidCath(error,errorInfo) {
//请求后台接口 把错误上报
console.log(errorInfo,'errorInfo');
console.log(error,'error');
}
render(){
if(this.state.errorInfo){
return(
<div>
错误替代展示
</div>
);
}
return this.props.children;
}
*useEffect 可以模拟哪些生命周期
1.componentDidMount //加载完成的
2.componentDidUpdate //更新阶段
3.componentWillUnmount //卸载阶段
*useRef 和 createRef 区别
useRef 只执行一次，有初始值，可以用于保存上一次的值
createRef 每次组件渲染都会执行，没有初始值
*setInterval，setTimeout 特性
const [time,setTime] = useState(3)
useEffect(() => {
//setInterval，setTimeout 会形成闭包，会保存time的复制值，该值与外面的time
//不是同一个值
setInterval(() => {
setTime(time-1)
//始终输出
console.log(time,'xxx');
},1000)
},[])
*hook 规则
*hook 不要在循环，条件或嵌套函数中调用hook，确保总是在你的React函数的最顶层以及任何return之前调用他们
*hook只能在函数组件里调用(包括自定义hook)，不能用在普通函数或者类组件里
*hook为什么必须要放到最顶层？
hook 必须要按照一定的顺序执行，(举个例子)否则就会报错，所以必须放在最顶层
*react常用hook
useState, useEffect, useRef, useCallback, useMemo, useContext, useImperativeHandle, useLayoutEffect
useState 2种用法
useState(初始值)
useState(() => {
return 值
})
useImperativeHandle + forwardRef 实现父组件调用子组件里的方法
*react 可不可以用map循环的index当作key
可以，但可能会有问题，例如以前讲的小花，小蓝，小白那个表单例子，所以最好使用唯一id或者唯一key
*react 在生命周期中的哪一步你应该发起AJAX请求：useEffect 或者componentDidMount
*shouldComponentUpdate 作用：优化子组件是否渲染
*redux 中间件：redux-promise，redux-thunk，redux-action，redux-persist
*react vue 区别
1.响应式原理不同
vue：vue会便利data数据对象，使用Object.defindProperty 将每个属性都转换为getter和setter
每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候会记录组件用到了哪些数据，当数据发生改变的时候，
会触发setter方法，并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法，进行渲染数据
react：React主要是通过setState，useState方法来更新状态，状态更新之后，组件也会重新渲染
2.监听数据变化的实现原理不同
vue：Vue通过getter/setter以及一些函数的劫持，能精确知道数据变化
react：React默认是通过比较引进的方式(diff)进行的
3.Diff算法不同
vue和react的diff算法都是进行同层次的比较，主要有以下两点不同：
vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是
同类型的节点，只会修改节点属性
vue的列表对比采用的是首位指针法，而react采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，
react会把最前面的节点一次移动，而vue只会把最好一个节点移动到最后一个，从这点上来说vue的对比方式更加高效
*dva的使用方式
namespace, state, reducers, effects, 具体的参数使用方法也要背出来
*React 父子组件传值方式：
1.props
2.Context
3.redux dva
4.发布订阅
5.useImperativeHandle + forwardRef
6.render props
*Context 用法：
const ThemeContext = React.createContext(参数)
<ThemeContext.Provider value = "参数">
<组件/>
const theme = useContext(ThemeContext)
*什么是redux
作用：redux就是react的状态管理工具
是什么：view就是react的状态管理工具
使用场景：大部分的项目都要使用redux(真的1-2页面的小项目可以不用)
优点：redux状态使用方便，避免了父子组件或者兄弟组件传值
缺点：上手难 学习成本高 redux react-redux redux-actions redux-persist
*redux 原理
let createStore = (reducer) => {
let state;
//获取状态对象
//存放所有的监听函数
let listeners = [];
let getState = () => state;
//提供一个方法供外部调用派发action
let dispath = (action) => {
//调用管理员reducer得到新的satte
state = reducer(state,action);
//执行所有的监听函数
listeners.forEach((I) => I())
}
//订阅状态变化事件，当前状态改变发生之后执行监听函数
let subscribe = (listener) => {
listeners.push(listener);
}
dispath();
return{
getState,
dispath,
subscribe
}
}
let combineReducers = (renducers) => {
//传入一个renducers管理组，返回的是一个renducer
return function(state={},action={}){
let newState = {};
for(var attr in renducers){
newState[attr] = renducers[attr](state[attr],action)
}
return newState;
}
}
export { createStore, combineReducers };
*react 脚手架
1.umi+Dva
2.create-react-app
3.next.js
*react 状态管理工具：
1.mobx
2.Dva
3.redux
4.redux-saga
