react常见⾯试题
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’，然后在⽅法⽴马通过调⽤fs.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属性，⽅便⽐较
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通过State()将store中保存的state挂载在了⾃⼰的状态上；
3.⽤户产⽣了操作，调⽤了actions 的⽅法；
4.actions的⽅法被调⽤，创建了带有标⽰性信息的action；
5.actions将action通过调⽤store.dispatch⽅法发送到了reducer中；
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模式update是什么
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是前端组件化框架，由后端组件化发展⽽来；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。