react常见面试题

朱雀 2022-10-31 12:13 62阅读 0赞

## react常见面试题 ##

**1、为什么state值不能修改，而用this.setState去修改？**

setState是异步的。是否调用render进行再次渲染。setState本质是通过一个队列实现state更新的，执行setState时，会将要更新的state合并后放入状态队列，而不会立即更新。如果没有通过this.setState,而是直接this.state修改，会导致这个修改没有放入队列中，下次执行this.setState合并队列时，就会忽略这次的修改，从而导致数据没有更新。
    简单点说，就是setState就是放入队列，而this.state会跳过队列，从而导致有可能这次的修改值会被忽略掉

**2、react的钩子函数有哪些？请求放在那个函数中？为什么？渲染页面钩子函数的执行顺序什么？**

钩子函数：componentWillMount、render、componentDidMount、shouldComponentUpdate、componentWillUpdate、componentDidUpdate
    请求放在componentDidMount，因为这个在组件加载的时候只会执行一次
    执行顺序;componentWillMount、render、componentDidMount、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
    componentWillReceiveProps是在props发生改变的时候执行

**3、state与props有什么区别？**

props是外部组件传入的数据，一般是父组件传到子组件的数据。
    props里面的数据不能修改，只能通过绑定父组件的方法来修改props里面的值，然后再传到子组件。
    而state是组件的私有变量。主要用于组件的保存，控制以及修改自己的状态，不
    能通过外部的访问以及修改，只能通过内部的this.setState方法来修改state里面的内容。

**4、react如何去操作dom的？**

通过refs可以实现对dom的操作。通过给组件添加ref=‘XXXXX’,然后在方法立马通过调用this.refs.XXXXX，从而进行对dom的操作

**5、react在setState之后执行了哪些操作？**

setState的基本过程是，在执行setState之后，会执行shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。在执行render的时候 this.state才会被更新。之前两个钩子函数都不会更新

**6、react性能优化是哪个周期函数？**

shouldComponentUpdate这个函数用来判断是否需要调用render方法重新描绘dom，因为dom的描绘非常的消耗性能，如果可以在shouldComponentUpdate中写出更优化的dom diff算法可以极大的提高性能

**7、diff算法**

1.把树形结构按照层级划分，之比较同级元素
    2.给列表结构的每个单元添加唯一的key属性，方便比较
    3.react只会匹配相同的calss的component
    4.合并操作，调用component的setState方法的时候，react将其标记为dirty，到每一个事件循环结束，react会检查所有标记dirty的component重新绘制
    5.选择性子树渲染，可以重写shouldComponentUpdate，提高diff算法的性能

**8、react性能优化的方案**

重写shouldComponentUpdate来避免不必要的dom操作
    使用key来帮助react来识别列表中所有子组件的最小变化
    使用production版本的react.js

**9、函数式组件和类组件有啥不同？**

类组件不仅允许你使用更多的功能，如组件自身的状态和生命周期钩子函数，也能直接访问store并维持状态
    函数式组件仅是接收props，并将组件自身渲染到页面时该组件就是一个无状态组件，可以使用一个纯函数来创建这样的组件

**10、什么是redux？**

redux的基本思想是整个应用的state保持在一个单一的store中。store就是一个简单的JavaScript对象，而改变应用的state的唯一方式就是在应用用触发action，然后为这些action编写reducers来修改state。整个state的转化都是在reducers中完成的，并且不会有任何副作用
    
    1.store通过reducer创建了初始状态；
    2.view通过store.getState()将store中保存的state挂载在了自己的状态上；
    3.用户产生了操作，调用了actions 的方法；
    4.actions的方法被调用，创建了带有标示性信息的action；
    5.actions将action通过调用store.dispatch方法发送到了reducer中；
    6.reducer接收到action并根据标识信息判断之后返回了新的state；
    7.store的state被reducer更改为新state的时候，store.subscribe方法里的回调函数会执行，此时就可以通知view去重新获取state；

**11、在redux中，什么是store？**

store是一个JavaScript对象，它保存了整个应用的state，于此同时，store也承担了以下的职责：
    	1.允许通过getState（）访问state
    	2.通过dispatch（action）改变state
    	3.通过subscribe（listener）注册listeners
    	4.通过subscribe（listener）返回函数处理listener的注册

**12、在redux中，什么是action？**

action是一个纯JavaScript对象，他们必须有一个type属性表明正在执行action的类型。实质上action是将数据从应用程序发送到store的有效载荷

**13、在redux中，什么是reducer？**

一个reducer是一个纯函数，该函数以先前的state和一个action作为参数，并返回下一个state

**14、什么是纯函数？**

一个纯函数是一个不依懒于且不改变其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的结果

**\#vue与react的区别？**

1、react是严格上针对mvc的view层，vue则是mvvm模式
    2、操作dom的方式不同，vue是通过指令操作dom，而react通过js进行操作
    3、数据绑定不同，vue实现的是双向绑定，而react是单向数据流
    4、react的state内容不可以直接修改，需要通过setState去修改，vue的state不是必须的，数据主要有data属性在vue对象中管理的
    5、React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染；
    Vue本质是MVVM框架，由MVC发展而来；React是前端组件化框架，由后端组件化发展而来；