react常用面试题（一）——面试必备

有关react的知识点与面试题

1 什么是react？

 react是专注视图层的响应式框架，单项数据流，单向数据绑定。

2. react，vue，jq对比

 react专注视图层，单向数据绑定；

 vue是以数据驱动视图响应式框架，双向数据绑定；

 jq操作dom的类库。

3. react为什么必须使用setState去修改state？

 因为react有单项数据绑定特性，必须使用setState函数修改，才能使组件进入更新阶段。

4. setState 默认是异步还是同步？如何成为同/异步呢？
有时是同步，有时是异步。
setState在合成事件和生命周期函数里是异步的，使用setState的第二个参数callback得到最新的值解决
在原生事件和setTimeout里是同步的

5. react 组件有几种写法？分别是什么，并说出他们的区别？

 有两种写法，分别是无状态组件(函数组件)和有状态组件(类组件)；

 区别：函数组件没有state，没有生命周期，没有react特性，函数组件直接return渲染，
 函数组件使用参数传递的方式进行props传递；

 类组件用有react特性，类组件用render return 渲染。

6. 什么是高阶组件？它的意义是什么？

 一个函数接收一个组件，返回一个类组件。

 为了复用类组件里的方法逻辑等。 在没有hook之前，函数组件没有react特性，所以才有了这种模式。

7. react的生命周期都有哪些？

 react生命周期分为三个阶段，分别是挂载阶段、更新阶段和卸载阶段；

 挂载阶段：constructor、render、componentDidMount

 更新阶段：static getDerivedStateFromProps(可以对props和state进行修改的)、
 shouldComponentUpdate(是否要更新)、render、componentDidUpdate(完成更新)

 卸载阶段：componentWillUnmount

8. 性能优化都有哪些？

 shouldComponentUpdate(是否要更新)、
 memo、useMemo、useCallback、pureComponent(等价于自动调用了shouldComponentUpdate)、
 React.lazy(组件的按需加载)等等。

9. 上下文对象

React.context创建一个全局的共享上下文对象。 父组件使用context.Provider提供共享数据
子组件context.Consumer接收共享数据 且Consumer组件里必须用函数接收

全局上下文

    const context=React.context()
//父组件
    <context.Provider value={data}>
        <Son/>
    </context.Provider>
//子组件
    <context.Consumer>
        {(data)=>{
            return <div>{...data}</div>
        }}
    </context.Consumer>

10. 懒加载

React.lazy(()=>import('./Con.jsx'))
<React.Suspense fallback='1908'>
    <Con/>
</React.Suspense>

11. hook生命周期

直接用：普通的更新钩子
空数组：挂载完成钩子 等价于componentDidMount
数组里有值：对该监听，只有该值更新的时候才会触发，第一次监听也会触发
返回一个函数：卸载(清除定时器等)

12. 受控&非受控组件

 受控组价：行为和交互被react控制的组件，比如input的value被state控制，赋值操作被onChange控制；

 非受控组件：不被react控制，由用户自由操作的。比如：input的type类型是file。

13. 什么是jsx？

jsx是类xml的一种格式，底层是js；看上去很像html的一种js扩展语法，它还是React.createElement的语法糖。

14. 虚拟dom和diff算法

简单来说，用js通过算法计算出来的dom对象，叫虚拟dom。diff算法的原理：同层对比，发现不一致，就直接用新的虚拟don替换旧的，且停止向下对比。

15. 插槽

使用Props.children接收上游组件传入的子元素或者内容`<Slot>内容</Slot>`

16. 说一些react顶级api

React.Component、React.PureComponent、React.createElement、React.cloneElement、React.children、
React.Fragment、React.createContext、React.createRef、React.lazy、React.Suspense、React.forwardRef、
React.useRef、React.useState、React.useEffect、React.memo、React.useMemo
、React.useCallback、ReactDOM.render、ReactDOM.createPortals

17. react是单向数据流，如何实现数据双向邦定?，写出核心代码！

react默认是单向数据，通过onChange事件进行时时监听来获取value值，通过setState来实现数据双向邦定。

import React, { Component } from 'react';
class View extends Component {
    constructor(props) {
        super(props)
        this.state={
            formData:{
                name:'',
                age:'',
                code:''
            },
        }
        this.setForm=this.setForm.bind(this);
    }
    setForm(e){
        let name=e.target.name;
        let value=e.target.value;
        const formData=this.state.formData;
        formData[name]=value;
        this.setState({
            formData,
        })
    }
    render() {
        const {name,age,code} = this.state.formData;
        return (
            <div>
                <input name='name' value={name} onChange={this.setForm} type="text" placeholder='姓名'/>
                <input name='age' value={age} onChange={this.setForm} type="text" placeholder='年龄'/>
                <input name='code' value={code} onChange={this.setForm} type="text" placeholder='学号'/>
            </div>
        );
    }
}
 
export default View;

18. 一个父组件，一个子组件，如何在子组件增加一个事件来个设置父组件的state值？

//父组件

import Son from "./Son"
this.state={
    res:""
}
setPar=(n)=>{
    this.setState({
        res:n
    })
}
<Son setPar={this.setPar}/>
//子组件
constructor(props){
    super(poprs)
}
_set=()=>{
    this.props.setPar("666")
}
<div onClick={this._set}></div>

19. react中props 的使用场景有哪些，写出4种及以上？除了props还可能使用什么方法实现数据传递，怎么实现？

①直接使用它的数据类型(父传子)

②props.children 接收父组件(闭合组件)传入的数据

③子传父用callback函数

④props接收组件

除了props还可以使用context,mobx,redux方法实现数据传递；

⑴先创建共享的上下文对象，

⑵根组件用context.Provider作上下文组件数据提供者

⑶数据的使用者用context.Consumer接收，Consumer里面必须是一个带返回值的函数

20. 用过es6吗？用过哪些？到少说出6个以上！

import,let,const,...,map,export,箭头函数等；

原文转载至https://blog.csdn.net/WangLuke_/article/details/117331494?spm=1001.2014.3001.5501