react面试题

一、类组件和函数组件的区别

1. 从语法上来说：类组件是继承于component类的，内部必须有render方法，必须return一个react元素。而函数组件是一个函数，返回一个jsx元素，比较起来类组件的话，函数组件简单。

2. 从实例化来说：类组件需要实例化，用this来操作组件本身，而函数组件不需要实例化，没有this,不占内存，函数组件渲染时候只需要调用函数就可以了，执行效率高。

3. 类组件有生命周期，函数组件没有生命周期，需要调用Hooks函数

4. 类组件有自己的状态，函数组件没自己的状态，又被称为“无状态组件”

二、React优化性能的手段

1. 可以使用React.memo进行组件记忆，对于相同的输入，组件不重复执行。

2. 在函数组件中使用Use.Callback( )和Use.Memo( )来进行组件优化，当依赖列表不发生变化的话，就不用更新组件。

3. 使用路由懒加载

4. 不要使用内联函数定义

5. 减少使用内联样式

6. 避免在Willxxx系列的生命周期中使用发送请求、操作dom等。

7. 在类组件中，事件函数在constructor( )中的bind改变this指向

8. 列表渲染的时候加key

三、hooks

1. hooks解决的问题

1. 在函数组件中不能用state，所以用useState来当做函数式组件的状态

2. 有状态的逻辑组件都可以用自定义的Hooks封装起来

3. Hooks可以用useEffect处理副作用问题。

4. 开发效率和质量问题:函数式组件比类组件简洁，效率高，性能也好。

2. react

1.useState------------模拟类组件的状态管理

1. useState用来给函数式组件引入组件状态，返回值是一个数组。

2. 数组的第一个元素是组件状态，第二个是更新组建状态的函数，这个啥书可以让当前组件更新。

3. 接受一个参数作为初始值，第一个参数是状态，第二个是函数

2.useEffect-----------------副作用（数据获取、dom操作影响页面——在渲染结束之后执行）

1. 用来给函数组件引入生命周期

2. 他有两个参数，第一个参数是函数，第二个是依赖列表，只有依赖列表发生变化的时候，函数才会执行

3. 几种写法

1.第一种写法，可以类比类组件的componentDidMount和componentDidUpdata方法（这个是组件初次挂载，后续的每次更新都会执行）

useEffect(()=>{
    console.log('这是类比类组件的componentDidMount和componentDidUpdata方法')
})

2.第二种写法可以类比类组件的componentDidMount方法（组件初次挂载执行一次）

useEffect(()=>{
    console.log('可以类比类组件的componentDidMount方法')
},[])

3.第三种写法，可以类比类组件的componentDidUpdate方法（组件每次更新时都会执行一次）

这个写法。只会在[ ]中所监听的数据发生变化时，才会执行

useEffect(()=>{
    console.log('可以类比类组件的componentDidUpdate方法')
},[str])

4.第四种写法，return后面的写法是卸载的时候执行的

useEffect(()=>{
    console.log('可以类比类组件的componentDidUpdate方法')
    return ()=>{
        console.log('return后面的写法是卸载的时候执行的')
    }
},[])