React相关

面试

生命周期：

• “Render 阶段”纯净且不包含副作用。可能会被 React暂停，中止或重新启动。
• “Pre-commit 阶段” 可以读取 DOM。

• “Commit 阶段”可以使用 DOM，运行副作用，安排更新。

• 挂载时

  • “Render 阶段”
    
    • constructor
    • getDerivedFromProps
    • render
  • “Pre-commit 阶段”
  • “Commit 阶段”
    
    • React更新DOM和refs
    • componentDidMount
• 更新时
  
  • “Render 阶段”
    
    • 由于 news props、setState()、forceUpdate()等引起的更新
    • getDerivedFromProps
    • render
  • “Pre-commit 阶段”
    
    • getSnapshotBeforeUpdate
  • “Commit 阶段”
    
    • componentDidUpdate
• 卸载时
  
  • “Render 阶段”
  • “Pre-commit 阶段”
  • “Commit 阶段”
    
    • componentWillUnmount

diff算法

• 同级比较
• 时间复杂度为O（1）
• 设置key值来优化，识别同级组件。避免了列表数据改变引起的不必要重复渲染。

渲染优化

• PureComponent优化
• useMemo()、useCallback()等
• useEffect()的第二个参数
• shouldComponentUpdate（）

HOC、函数作为子组件

-提高代码的复用性，减少代码量、降低耦合度。

react开发脚手架

• rekit 集成度高一些
• creact react app
• CodeSandBox 在线的不需要本地环境

状态管理

• redux的三大原则

  • 单一数据源
  • State 是只读的
  • redcer使用纯函数来执行修改

• Store

  • createStore(reducer) 创造store
  • getState() 得到当前state
  • dispatch(action) 派发action
  • subscribe(listener) 订阅状态的改变
• action
  
  • type 类型
  • text 行为的描述

• reducer

  • 接受两个参数：旧的state、action 【刚开始没有旧state所以需要默认的值initialState】
  • 因为所有reducer可以接受到所有的action，所以需要判断action类型来执行对store的不同更新

• 相关API

  • combineReducers
    
    • 多个reducer整合到一起成为一个reducer
  • bindActionCreators
    
    • 是当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 dispatch 或 Redux store 传给它。

• 中间件

  • react-redux

    • <Provider store> 根节点提供全局store
    • mapStateToProps（state）映射Redux全局的state到组件的props上
    • mapDispatchToProps(dispatch) 映射dispatch到props上
    • connect(mapStateToProps,mapDispatchToProps)(组件)

  • redux-logger

    • 打印日志
    • 放在applyMiddleware()的最后一个参数，确保打印正确的日志。
    • 使用例子
    • import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();
const store = createStore(reducer, applyMiddleware(logger));

  • react-thunk

    • 与同步操作的不同

      • 异步操作的差别是它要发出三种 Action。
        
        • 操作发起时的 Action
        • 操作成功时的 Action
        • 操作失败时的 Action

      • 三种状态的写法
        // 写法一：名称相同，参数不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }

        // 写法二：名称不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

    • 原理
      
      • 写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch，使其可以接受函数作为参数。

• 不可变数据

  • 不能直接修改，只能先复制原来的数据再去修改
  • 使用浅比较，判断引用是否相等。
  • 可以使用immutable.js结合redux，代码比较直观，开发时候效率也会更高。

react-router

• 路由的三种实现方式， history属性，一共可以设置三种值。
  
  • browserHistory 【URL路由（推荐）】 /
  • hashHistory 【hash路由（支持低版本浏览器，解决页面不刷新问题）】#
  • createMemoryHistory 【内存路由（服务端渲染或者react-native）】存储在内存里面，不会在地址栏被操作或读取
• 获取URL参数 this.props.params.参数
• API
  
  • <Link>使用href 去渲染一个可访问的锚标签,浏览器不会刷新。
  • NavLink是 < Link > 的一个特定版本, activeClassName 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数
  • <Prompt> 用户离开时候的提示
  • <Redirect> 重定向到新的页面，通常用于登陆验证
  • <Route> 当一个location匹配路由的path时，渲染某些UI。
  • 文档查询