react 个人总结

168 阅读4分钟

1、 redux 中间件的原理是什么?

action 和 store之间 dispatch 

2、你会把数据统一放到redux中管理,还是共享数据放在redux中管理?

虽然工作中许多同事仅把共享数据放在 redux 中,但是个人建议是将数据统一放在 redux 中管理。

吴军 Google方法论

数据存储形式 state props redux

如果仅将共享数据放在redux中管理,当页面出现问题时,定位问题时,需要全部检查,违背了代码出错的可调节性。

如果将数据统一放在redux中管理,数据的处理方式是一致的,action -- store -- reducer,可以快速定位问题。

考虑项目扩展,应该统一存放。

redux存储消耗内存? Chrmoe浏览器可以存储5个G的内存。

redux存储数据太多,会臃肿? redux 可以拆分成许多小的reducer。

项目的大小? 坚决抵制项目的思考,项目没有大小的分析,只要是项目就要以工程化角度来对待。

redux 和 immutable 结合使用时,整个项目的性能会达到最优。

3、componentWillReceiveProps 的调用时机

componentWillReceiveProps是React生命周期中的一个环节。

componentWillReceiveProps在初始化render的时候不会执行,它会在Component接受到新的状态(Props)时被触发,一般用于父组件状态更新时子组件的重新渲染。

在componentWillReceiveProps这个回调函数中,我们可以获取到就是props,通过this.props来获取,然后新的props则是通过函数的参数传入,在这里我们可以比较两个props从而对本组件的state作出安全的变更然后重新渲染我们的组件或者是触发子组件内的某些方法。

4、react性能优化的最佳实践

  • 1、PureComponent 的使用场景

PureComponent 和 Component 的区别是,PureComponent 自带 shouldComponentUpdate 生命周期函数,会对传入的props进行浅比较。

PureComponent 和 immutable.js库 做结合,完美的解决react的性能问题。

  • 2、函数式编程按需加载

React.memo()包装函数。memo方法同样是自带shouldComponentUpdate 生命周期函数,会对传入的props进行浅比较。

5、虚拟Dom是什么? 为什么虚拟dom会提升代码性能?

js对象, 两个真是dom比对非常耗性能,js 对象比对, diff算法(头层比对,不一致,直接替换) 

6、webpack中,是借助loader完成的jsx代码的转化,还是babel? 

借助babel里面 preset-react 

7、调用setState后,发生了什么 

多次setState合并一个setState, 可以改用用函数避免 

this.setState((prevState) => { 

    age: ++ prevState.age 

}) 

8、setState是异步的,这个点你在什么时候遇到过坑 

<input refs"input" value={thsi.state.age}>  

this.setState((prevState) => { 

    age: ++ prevState.age 

}, () => { 

    this.refs.input.value 

}) 

9、refs的作用是什么,你在什么业务场景下使用过refs 

操作dom

10、refs是一个函数,有什么好处 

render() { 

    return <div ref={(div) => {this.ele = div}}>div</div> 

} 

用函数式写法,不要用字符串

好处:组件销毁跟着销毁,不会发生内存泄漏

11、高阶组件你是怎么理解的,他本质式一个什么东西 

对一个组件进行包装,复用,共用的东西放在高阶组件里,传递一些参数动态去改变,高阶组件本质上是一个函数

12、受控组件与非受控组件的区别? 

受控组件:组件改变完全受控数据变化,数据改变组件也跟着变化

13、函数组件和hooks 

  • 函数组件:
  1. 组件的第0个参数是 props - 接收父级传递过来的信息
  2. 组件中的 return(必写) 定义该组件要渲染的内容
  3. 没有生命周期、this、state
  • hooks
  1. 简化组件逻辑
  2. 复用状态逻辑
  3. 使用了无状态组件,但又需要状态时

14、this指向问题你一般怎么解决 

  • =>
  • bind()
  • let self = this  箭头函数,找不到this,所以沿着作用域链去查找(例如绑定onClick事件,引用箭头函数,没找到this,他就去函数外层去找,函数外层是个组件,所以this指向这个组件) 

15、函数组件怎么做性能优化 

react里面有个memo方法 

react.memo(函数式组件) 

没有生命周期,比class组件快 

React.memo(function Test(props){
   return <div>123</div>
})

16、哪个生命周期里发送ajax 

在componentDidMount里发比较好 

其次componentWillMount已被废弃 

ssr项目时,componentWillMount要做服务器端数据获取,所以不能被占用 

17、SSR的原理是什么? 

这个要从虚拟dom说起,虚拟dom的一个好处是可以让我们的代码运行速度更快,另一个好处是,虚拟dom让我们的react代码,最终变成了JS对象。 

也就可以让我们的react代码可以在客户端(浏览器)上执行,还可以在服务器上执行。 

服务器上是没有dom这个概念的,通过nodejs 也可以运行的react代码。 

SSR核心的原理是通过 借助虚拟dom来实现的。