react注意事项

1. redux中间件的原理是什么？

（redux-thunk源码，redux-saga）

redux dispatch action—》store—》reducer—》改变store

中间件指的是action和store之间 如果调用action.dispatch直接把action传给store（action只能是对象）中间件是的action可以是函数 action在到达store之前会经过中间件，中间件使得函数式的action转化为对象式的action。

 

1. 你会把数据统一放到redux中管理，还是共享数据放在redux中管理。

（所有）可扩展，可维护

   

1. componentWillReceiveProps被调用的时机

子组件第二次接受props并且里面的数据改变的时候

 

1. pureComponent

自带shouldComponeUpdate（关于props的前比较）

和immutable.js库结合，是react性能优化的最佳实践

 

1. 虚拟dom是什么？为什么会提升性能？

虚拟dom是一个js对象，两个Dom对象的比对比较麻烦，转化为js对象的比对。

Key值相同，直接复用，直接他俩比不用循环比对。Diff算法如果一层节点有问题，不在向下比较，同层比对，该放弃就放弃，算法复杂度由n*n降到n

 

1. Webpack中，是借助loader完成的JSX代码的转换，还是babel？

Vue是vue-loader

React是babel里面的preset-react完成转化的

 

1. 调用setState后，发生了什么？

官方推荐的是调用函数,通过一个函数返回一个对象。

this.setState(() =>({

   name: ‘lmj’

}))

1. setState是异步的，遇到过什么坑？

 

<input refs=’input’ value={this.state.age}/>

 

this.setState((prevState) => {

   age: ++prevState.age

}, () => {

   this.refs.input.value

})

 

This.refs.input.value

 

1. refs的作用是什么，你在什么业务场景下使用过refs？

操作dom

展示一个图片，获取图片的宽高（react不能直接操作dom）

比如（放大镜，获取图片宽高）

 

1. refs是一个函数，他的好处是什么？

componentDidmount(){

this.elem

}

render（）{

    return <div refs={(div) => {this.elem=div}}>div</div>

}

 

Refs要用函数，不要用字符串，便于销毁

 

1. 高阶组件是怎么理解的，本质是什么东西，用过继承吗，哪个好？

不要去使用继承，组合优于继承

 

高阶组件就是包装一个组件再返回一个组件。把公用的写到高阶组件中去，可以通过传递参数在不同场景下实现差异。本质上就是一个函数。参数是函数，返回也是函数

Hook可以解决高阶组件地狱。

 

1. 受控组件和非受控组件的区别

受控组件的改变完全受控于数据的变化，数据变了，页面就变了。

<input value={this.state.value}/>  (更好  数据驱动)

非受控组件<input />没有数据的绑定通过refs来控制

 

1. 函数组件与hooks

 

1. this指向一般如何解决

bind，箭头函数

 

1. 函数组件怎么做性能优化？

function Test(props) {

    Return <div>1111</div>

}

好处：函数式组件没有类的构造，生命周期，直接执行就可以

坏处：只要数据改变了就直接执行，要是有shouldComponentUpadate就好啦

React.memo(function Test(props) {

    Return <div>1111</div>

})这样包装之后就有shouldComponentUpadate 的功能了。

 

1. 哪个生命周期发送ajax？

componentDidMount

1. ssr原理
2.  redux-saga 的设计思想是什么？ 什么是sideEffects
3.  React，juery，vue是否有可能共存在一个项目中？

可能

1. 组件是什么？类是什么？类被编译成什么？

组件指的是页面的一部分

模块是一个个webpack import引入的文件

Es6中的类在es5中就是构造函数

1. 你是如何跟着社区成长的？
2. 如何避免ajax数据重新获取？

用redux进行管理，判断是否存在，如果存在直接复用。

 

1. React-router4的核心思想是什么，和3有什么区别？

4：路由也变成组件了<Link></Link>  <Route></Route> 非常灵活

3：路由还是配置的

 

1. immutable.js和redux的最佳实践

 

 

 

 

1. reselect是做什么的？

充当vue里面computed计算属性的角色。如果依赖的数据没有发生变化，计算属性就不会重新计算。做缓存提升代码性能。

 

1. react-router基本原理，hashHistory，browserHistory

hashHistory： 不需要后端支持

browserHistory：还需要后端在服务器上做配置

 

1. 什么情况下使用异步组件？

Reloadable库  （路由懒加载，按需加载，访问那个页面加载哪个页面代码）

 

1. XSS攻击在react中如何防范？

dangerouslySetInnerHTML={{_html:’<script>alert(1)</script>’}}

要慎用

 

1. getDerivedStateFromProps，getSnapshotBeforeUpdate

getDerivedStateFromProps和componentWillReceiveProps差不多，可以对state进行一些更改

getSnapshotBeforeUpdate和componentWillUpdate差不多，想要获取更新之前的dom结构可以用它