虚拟DOM

虚拟 dom 可以减少 dom 操作。(合并)
可以省去多余的操作。(减少范围)

虚拟 dom 是一个 js 对象,可以给任何其他实体建立映射关系,比如:ios 应用,安卓应用,小程序。

const vNode={
        key=null,
        props:{
             children:[
                 {type:'span'},
                 {type:'span'}
             ],
             className:'red',
             onclick:()=>{}
        },
        ref=null,
        type='div'
}

需要用额外的创建函数 CreateElement,可以用 JSX 来简化,严重依赖打包工具,因为 JS 不认识 jsx 语法。

JSX

事件绑定&this指向

箭头函数,bind绑定

state,ref,props

MVVM 中 VM

react-router-dom

router,link,navlink,redirect,switch,传参(params,search,state),withRouter

react-redux

redux

container,UI,action,store,reducer

hooks

useState/useReducer,useEffect,useContext,useCallback,useMemo,useRef

本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。

生命周期

componentDidMount() ,componentWillUnmount(),componentDidUpdate

受控组件与非受控组件

state,ref

Diffing 算法

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

Duke与Villanova不会再次重建

函数柯里化

fn(a)(b)//a=>b=>a+b//proptype,event

lazyload

Jest 和 React Testing Library

第三方库:

Axios
Pubsub
Redux
nanoid
prop-types
antd

打包工具:

Babel
Webpack