React面试题汇编

react面试题

1 react 和 vue 有什么区别

一样的
1 虚拟DOM. diff算法
2 想法逻辑是一样，都是专注视图搭建，通过修改数据，从而更新视图

不一样
vue 
	指令  双向数据绑定  compued 和 watch. mvvm ...
	接入其它框架或者库比较难 
	入门简单 ，api文档方法比较多， 必须参照文开发，
	vue 之前在北方或者二线城市比较火 
react 
	原生 只是一个vue框架
	可以直接使用其它框架。
	入门需要一定的js基础 ， api文档方法比较少，想怎么写就怎么写
	一线城市 特别是 杭州阿里 ，以及联通
	

2 setState

1 setState是异步的？ 
	 1） 18 之后就改为异步
	 2） 18 react运行环境 异步
	 		    原js事件 和 定时器里面 它同步的
2 为什么是异步的？
	setState 不仅仅是修改数据，而且还需要执行更新阶段的生命周期 ， 如果设计成同步会造成等待和堵塞，当数据改变的时候 
		第一 更新会执行多次
		第二 父子组件的数据不同步
		
		、
setState({},()=>{})
setState(()=>({}),()=>{})

3 什么是复合事件

react所有的事件都是复合事件 ， onClick onChange等等 ， 他是将原生的事件进行绑定，而且统一绑定了document对象上，通过事件委托的原理，然后找到事件源，去执行该事件和它的对应方法， 并且事件也不是立即出发，会放在执行栈里面，然后通过等待合并最后执行一次

4 受控组件和非受控组件

表单元素
受控组件：授state控制，需要通过onChange来修改状态
非受控组件 ： ref来获取值

5 生命周期1

1 挂在阶段
	 constrcotr(){}
	 UNSAFE_componentWillMount(){}
	 render(){}   //		更新的时候也执行
	 componentDidMount(){}   //获取dom请求数据 都在这里面完成
2 更新阶段
	 componetWillReceiveProps(){} // 父组件执行就执行 -- 同步自组件数据
	 shouldComponentUpdate(nextProps,nextState){}   // 返回true 更新  返回false 不更新
	 PureComponent 类组件   memo()函数组件
	 componentWillUpdate(){}
	 render(){}
	 componentDidUpdate(){}
	
3 卸载阶段
	componentWillUnmount(){}

6 生命周期2

1 挂在阶段
constructor(){}
static getDerivedStateFromProps(){ } //必须有返回值 切必须生命state ,将返回给添加到state
render(){}
didMount(){}

2 更新阶段
static getDerivedStateFromProps(){ } //必须有返回值 切必须生命state ,将返回给添加到state
shouldComponentUpdate(){}
render(){}
getSnapshotBeforeUpdate(){}   reutrn 结果 给didUpdate
didUpdate(preProps,prevState,x){ x 给的值}

3 卸载阶段
	componentWillUnmount(){}

7 生命周期3

废弃的三个will
componetWillReceiveProps  立意不明确，容易误操作
componetWillMount         可能会导致多次出发
componetWillUpdate				使用起来不好用

8hooks函数 *****

react
useState()

// 面试重点 
useEffect(()=>{
 //
return ()=> {卸载阶段}
},[count])
useMemo(()=>,[])
useCallback(()=>{})
useContext()
useReducer()

react-rouer-dom
useLocation()
useParams()
useNavigate()

react-redux
useSelector()
useDispatch()

9 useRef函数组件

// forwardRef

// useImperativeHandle

import React, { forwardRef, useState, useImperativeHandle } from "react";

const Home = (props, ref) => {
  const [n, setN] = useState(10);

  useImperativeHandle(ref, () => ({
    n: n,
    til: "hello world",
    add: () => {
      console.log(n);
    },
  }));

  return <div>home组件</div>;
};

export default forwardRef(Home); //高阶组件

10 自定义hooks

自定义hook就是通过原有的hooks来进行封装，

import { useState, useEffect } from "react";
import axios from "axios";
// 获取鼠标滑过的定位
function useGet(url, params) {
  const [state, setState] = useState([]);
  useEffect(() => {
    axios.get(url, { params }).then((res) => {
      setState(res.data.data);
    });
  }, []);

  return state
}

export default useGet;

11 高阶组件

​ 给组件统一附加一些 逻辑方法，使得组件功能更丰富

学过的高阶组件
forwardRef()
memo()
connect()()

2 login()
3 withRouter()

function withRouter(Com){
	return  function WithRouterHoc(props){
			useEffect(()=>{},[])
		 return <Com {...props}/>
	}
}

12 context

​ 跨组件通信的

context.Provider 提供数据
context.Consumer 使用数据

13 redux

reudcer(state,action)
dispach(action)
getState()
subscribe(()=>{})