• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

react 面试 笔记

开发技术 开发技术 2周前 (04-30) 3次浏览

react

1。setState 不可变值,可能是异步更新,可能是合并。(setTimeout 是同步更新)

2。 组件生命周期!!

3。Portals 传送门 组件渲染到父组件以外。使用场景:
– overflow hidden
– 父组件z-index太小
– fixed需要放在body第一层

return ReactDom.createPortal(
<div className="modal">{props.children}</div>,
document.body//dom 节点
)

以上则是把portals渲染到body上 。fixed 元素要放在body上,有更好的浏览器兼容性。(逃离父组件

  • Context 上下文
    5.性能优化
  • scu (shouldComponentUpdate):不必每次都用,需要的时候才优化。(总之就是看自己。。。
    **接下来的props,nextstate,通过对比  如果一样(true)就不重复渲染,如果返回false不渲染,可以优化性能,默认值是返回true。**。  
    shouldComponentUpdate(nextProps,nextState){
    		if(nextState.count !==this.state.count){
    				return true//可以渲染
    		}
    		return false //不重复渲染
    }
    深度比较 (一次性递归到底,耗费性能)必须配合不可变值使用  比如this.state.list.concat({id:"id_Data.now()"})
    .isEqual(nextProps.list,this.props.list)
    
  • PureComponent(纯组件)和React.memo:
class Demo extends React.PureComponent{
  xxxxxxxx
}
shouldComponentUpdate(){}//浅比较
其实原理都一样  
function MyComponent(props){}//使用props渲染
function areEqual(prevProps,nextProps){
如果把nextprops传入render方法的返回结果将prevProps传入render的返回结果一致就返回true,否则返回false
}
xxxx
export default React.memo(JyComponent,areEqual)
  • 不可变值immutable.js:
 彻底拥抱不可变值
 基于共享数据(不是深拷贝),速度好

react 默认父组件更新 子组件也无条件更新

  • 关于组件公共逻辑的抽离 :

  • 高阶组件HOC (hoc是一种模式,类似工厂模式

    const HOCFactory=(Compoent)=>{
    		class HOC extends React.Component{
    		//在此定义多个组件的公共逻辑
    		render(){
    		return<Component {...this.props}/>//返回拼装的结果
    		}
    		}
    		return HOC
    }
    const EnhancedComponent1=HOCFactory(WrappendComponent1)
    react redux connect  也是高阶组件
    
  • Render Props :
    7.Redux :
    – 基本概念:store state action reducer
    8.React-router

  • 路由配置

  • 路由模式:hash模式 ,h5 history模式后者需要serve端支持,无特殊需求可以选择前者
    获取动态参数(url参数):import {useParams}from “react-router-dom” const {id}=useParams()
    react 原理 :函数式编程,vodm和diff ,jsx本质,合成事件,setSTate batchUpdate ,组件渲染过程,前端路由
    函数式编程


程序员灯塔
转载请注明原文链接:react 面试 笔记
喜欢 (0)