react常见问题

1.redux中间件的原理是什么?
改装dispatch,中间件middleware是action和store中间

2.你会把数据统一放到redux中管理，还是共享数据放在redux中管理？
是的，都放在redux中管理。redux+immutable，性能最好facebook测试过。

3.componentWillReceiveProps的调用时机
子组件发生改变时，会调用这个

4.react性能优化的最佳方案。
class Test extends React.PureComponent{
// PureComponent自带shouldComponentUpdate可以减少手动update render
// PureComponent和Component基本上完全相同。当props或者state改变时，// PureComponent将对props和state进行浅比较。
constructor(props){
super(props)
}
render(){
return

hello

}
}
PureComponent和immutable.js库结合可以完美实现性能优化

antD插件babel如何实现按需加载
babel-plugin-import插件

5.虚拟dom是什么？为什么虚拟dom会提升react性能
虚拟dom是真实dom的js对象。
没有虚拟dom的时候，2个真实dom比对，资源消耗是虚拟dom的几万倍。因为真实dom上面有很多绑定了很多事件属性方法等等。所以把dom比对，换成js对象的比对。
如果key值一样，就比对key值，不用循环。
diff算法是同层比较，把算法范围降到n

6.webpack中，react是借助loader完成jsx代码转换，还是babel?
babel-preset-react

7.调用setState后，发生了什么？
常规写法是:
this.setState({
age:this.state.age +1
// 这种异步，频繁点击+1，容易看见一次增加了4-5，而下面函数调用就不会
})

//养成好习惯，推荐用这种方法，坑少
this.setState((preState)=>({
age:++ preState.age
}))

8.setState是异步的，遇到过什么坑？
setState
函数类组件里面才有
1.是异步的，会执行render方法，所以批量处理，节流性能消耗。
2.可以做第二个参数写箭头函数得到执行后的值
this.setState({count: 2}, () => {console.log(this.state.count)})
3.放在异步方法里面，会变成同步函数。setTimeout或者async

async componentDidMount() {
await this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 2
}

9.refs的作用，在什么业务场景下使用refs
渲染了一个图片，如放大镜，想获取图片的宽高。

class Test extends Component{
// 如果用reudx，不用写constructor，直接connect
constructor(props){
super(props)
this.state ={
top:0
}
this.handleWindowScroll = this.handleWindowScroll.bind(this)
}
handleWindowScroll(){
this.setState({
top:document.body.scrollTop
})
}
componentDidMount(){
// 当页面滚动时,top值发生变化
window.addEventListener(‘scroll’, this.handleWindowScroll)
}
componentWillUnmounte(){
window.removeEventListener(‘scroll’, this.handleWindowScroll)
}
render(){
return

{this.state.top}

}
}

10.ref写成函数，有什么好处?
1.直接this.elem获取到这个标签
2.有效的清空ref里面的东西，销毁dom后不会内存泄露。所以不要用字符串了ref=“abc”
class Test extends Component{
componentDidMount(){
this.elem
}
render(){
return <div ref={(div)}=>{this.elem=div}}>div test
}
}

11.高阶组件你是怎么理解的，它的本质是什么？
组件是一个函数，高阶组件是参数是函数，返回值还是函数.
下面是高阶组件回调地狱，如果用hook就可以解决回调地狱，并且代码量减半。

12.受控组件与非受控组件的区别
受控组件：value参数被state控制

非受控组件：

因为react是数据驱动页面的，所以建议都用受控组件。

13.函数组件和hooks
hooks可以给函数组件状态，生命周期。useState
把业务逻辑放在hooks里

14.this指向问题一般怎么解决
箭头函数,bind

15.函数组件优化
React.memo，减少render次数
React.memo(function Test(props){
return

123434311111

})

16.哪个生命周期里发送ajax?
compontentDidMount里,因为:
1.compontentWillMount在新版本react已经被废弃了
2.ssr中componentWillMount要做服务器端数据获取，所以不能占用

17.ssr的原理是什么？
ssr是服务端渲染，核心是因为虚拟dom，所以可以在node服务器端执行代码。

18.redux-saga的设计思想是什么？什么是sideEffects?

19.react,jquery,vue是否可以共存在一个项目中。
可以,

jquery

20.组件是什么，类是什么，类被编译成什么？
// 模块,webpack
// 组件是指页面的一部分，带有ui设计

21.你是如何跟着社区成长的。
react的twitter是最新的

22.如何避免ajax数据重新获取
redux进行状态管理

23.react-router4的核心思想是什么，和3有什么区别?

react-router4的核心思想是组件式

25.reselect是做什么使用的？
类似vue的computed计算属性，缓存提升代码性能

26.react-router的基本原理，hashHistory,browserHistory
browserhistory看起来漂亮，但是要后端配合，所以一般用hashHistory
createBrowserHistory： http://localhost:8084/second
createHashHistory： http://localhost:8084/#/second

27.什么情况下使用异步组件
reloadable库

28.xss攻击在react中如何防范？
dangerousslySetInnerHTML={{__html:‘’}}

29.getDerivedStateFromProps和getSnapshotBeforeUpdate
新出来的生命周期，取代componentWillReceiveProps