Please enable JavaScript.

Coggle requires JavaScript to display documents.

React (基础 (组件属性 (defaultProps (老版本是提供一个方法 getDefaultProps), children,…

- - - - 老版本是提供一个方法 getDefaultProps
  - - - componentWillUnmount
      - componentDidMount (这个回调 DOM 已经创建)
      - constructor()
      - render()
      - static getDerivedStateFromProps()
    - - static getDerivedStateFromProps()
        返回要更新的 state ，如果不希望更新可以返回 null
        (虚拟dom之后，实际dom挂载之前，和获取新 props 之后)
      - shouldComponentUpdate(nextProps, nextState)
        注意：调用 this.forceUpdate 触发的渲染不会调用这个回调
      - render()
      - getSnapshotBeforeUpdate()
      - componentDidUpdate()
        是否已经更新了 dom 应该是
    - - componentWillReceivePorps
        组件初始化时不调用，组件接受新的props时调用
      - componentWillMount
      - componentWillUpdate
- - - - store 用于储存应用的状态
        let store = createStore(reducer, initailValue);
      - state 以对象数的形式存储在全局 store 中
      - 使用 reducers 来更新 state
        let reducers = (state, action) => state
        state 可以是任何类型
        注意： state 返回的时候不能是原来的，一定要是全新的对象
    - - store
        
        dispatch 一个 action，会触发 subscribe 的回调，执行 reducer ，来下修改全局 state 树
        
        getState
        
        subscribe
        
        添加一个变化监听器。每当 dispatch action
      - combineReducers
        
        import { combineReducers } from 'redux' export default combineReducers({ reducer1, reducer2 })
      - action 本质是一个对象,代表哪种操作，reducer 根据 action 来进行操作
      - reducer 一个规则，从 action 如何改变 store->state
    - - Provider 设置 context 让 chile view 有获取 store 的能力
      - connect
        降到了可以直接使用 store.subscribe() 来实现更新 state
        使用 connect 好处是避免重复渲染带来的新能损耗
        
        connect(mapStateToProps, mapDispatchToProps)
        
        参数
        
        mapStateToProps
        将全局 state 的值映射到具体的 view，当全局 state改变了会自动渲染 View
        
        mapDispatchToProps
        定义了哪些操作要被当成 action 传递个 store
        const mapDispatchToProps = (dispatch, ownProps) => ( { onClick: () => { dispatch(setVisibilityFilter(ownProps.filter)) } } )
        等价于
        const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter: filter } }
      - 性能优化
- - - - 使用场景
        
        移除 props
        
        访问 ref
        
        抽取状态
        
        包装组件
    - - 继承方式代码片段
        (component) => (// component 本质是一个 render 函数或者 component class class NewComponent extends OldComponent { // override 所有的生命周期 render() { } })
      - 操作生命周期
- - - - Link
        导航器
        
        <Link to="/topics">Topics</Link>
      - Route
        具体内容
        
        支持嵌套
        
        <Link to="/topics/haha">Topics</Link> <Route path="/topics/:topicId" component={Topics} />
        Topics 返回具体的内容 (match) => { return view}
        Topics 的参数为
        match 一般嵌套 router 需要获取父 url
        
        path 声明的路由规则，比如示例的规则为 topics/:topicId
        
        url 具体的路由 /topics/haha
        
        isExact
        
        params 参数如 haha
        
        支持递归
        
        Route 的 component 返回自身
        
        route.component
        <route.component {...props} routes={route.routes} />
        
        <Route component={ view }>
        view 构造的时候回传入 route 参数
        
        route 的子 route 发生改变会触发 componentWillUpdate 我们可以在这里添加参数
        
        Route 之间的切换，其实就是 componnet 创建和销毁的过程，
        创建
        
        constructor
        
        componentDidMount
        
        销毁
        componentWillUnmount
        更新：（只要被 Route 包裹，就会有 route 相关参数）
        
        componentWillUpdate
        
        componentWillReceiveProps
        
        componentDidUpdate
      - Switch
        
        会 render 第一个匹配到的路由
        
        location
        
        EX:
        <Switch> <Route path='/' component={Page1}/> <Route path='/userInfo' component={Page2}/> </Switch>
        注意这两个页面都没有加 exact 来精准匹配，
        但是访问
        <Link to="/userInfo">Topics</Link>
        的时候只会 render Page1，而不会同时 render Page1 和 Page2
      - Redirect
        重定向
      - NavLink
      - Modal