- redux中间件的原理是什么?
(redux-thunk源码,redux-saga)
redux dispatch action—》store—》reducer—》改变store
中间件指的是action和store之间 如果调用action.dispatch直接把action传给store(action只能是对象)中间件是的action可以是函数 action在到达store之前会经过中间件,中间件使得函数式的action转化为对象式的action。
- 你会把数据统一放到redux中管理,还是共享数据放在redux中管理。
(所有)可扩展,可维护
- componentWillReceiveProps被调用的时机
子组件第二次接受props并且里面的数据改变的时候
- pureComponent
自带shouldComponeUpdate(关于props的前比较)
和immutable.js库结合,是react性能优化的最佳实践
- 虚拟dom是什么?为什么会提升性能?
虚拟dom是一个js对象,两个Dom对象的比对比较麻烦,转化为js对象的比对。
Key值相同,直接复用,直接他俩比不用循环比对。Diff算法如果一层节点有问题,不在向下比较,同层比对,该放弃就放弃,算法复杂度由n*n降到n
- Webpack中,是借助loader完成的JSX代码的转换,还是babel?
Vue是vue-loader
React是babel里面的preset-react完成转化的
- 调用setState后,发生了什么?
官方推荐的是调用函数,通过一个函数返回一个对象。
this.setState(() =>({
name: ‘lmj’
}))
- setState是异步的,遇到过什么坑?
<input refs=’input’ value={this.state.age}/>
this.setState((prevState) => {
age: ++prevState.age
}, () => {
this.refs.input.value
})
This.refs.input.value
- refs的作用是什么,你在什么业务场景下使用过refs?
操作dom
展示一个图片,获取图片的宽高(react不能直接操作dom)
比如(放大镜,获取图片宽高)
- refs是一个函数,他的好处是什么?
componentDidmount(){
this.elem
}
render(){
return <div refs={(div) => {this.elem=div}}>div</div>
}
Refs要用函数,不要用字符串,便于销毁
- 高阶组件是怎么理解的,本质是什么东西,用过继承吗,哪个好?
不要去使用继承,组合优于继承
高阶组件就是包装一个组件再返回一个组件。把公用的写到高阶组件中去,可以通过传递参数在不同场景下实现差异。本质上就是一个函数。参数是函数,返回也是函数
Hook可以解决高阶组件地狱。
- 受控组件和非受控组件的区别
受控组件的改变完全受控于数据的变化,数据变了,页面就变了。
<input value={this.state.value}/> (更好 数据驱动)
非受控组件<input />没有数据的绑定通过refs来控制
- 函数组件与hooks
- this指向一般如何解决
bind,箭头函数
- 函数组件怎么做性能优化?
function Test(props) {
Return <div>1111</div>
}
好处:函数式组件没有类的构造,生命周期,直接执行就可以
坏处:只要数据改变了就直接执行,要是有shouldComponentUpadate就好啦
React.memo(function Test(props) {
Return <div>1111</div>
})这样包装之后就有shouldComponentUpadate 的功能了。
- 哪个生命周期发送ajax?
componentDidMount
- ssr原理
- redux-saga 的设计思想是什么? 什么是sideEffects
- React,juery,vue是否有可能共存在一个项目中?
可能
- 组件是什么?类是什么?类被编译成什么?
组件指的是页面的一部分
模块是一个个webpack import引入的文件
Es6中的类在es5中就是构造函数
- 你是如何跟着社区成长的?
- 如何避免ajax数据重新获取?
用redux进行管理,判断是否存在,如果存在直接复用。
- React-router4的核心思想是什么,和3有什么区别?
4:路由也变成组件了<Link></Link> <Route></Route> 非常灵活
3:路由还是配置的
- immutable.js和redux的最佳实践
- reselect是做什么的?
充当vue里面computed计算属性的角色。如果依赖的数据没有发生变化,计算属性就不会重新计算。做缓存提升代码性能。
- react-router基本原理,hashHistory,browserHistory
hashHistory: 不需要后端支持
browserHistory:还需要后端在服务器上做配置
- 什么情况下使用异步组件?
Reloadable库 (路由懒加载,按需加载,访问那个页面加载哪个页面代码)
- XSS攻击在react中如何防范?
dangerouslySetInnerHTML={{_html:’<script>alert(1)</script>’}}
要慎用
- getDerivedStateFromProps,getSnapshotBeforeUpdate
getDerivedStateFromProps和componentWillReceiveProps差不多,可以对state进行一些更改
getSnapshotBeforeUpdate和componentWillUpdate差不多,想要获取更新之前的dom结构可以用它