react知識(shí)點(diǎn)梳理

1.immutable

連續(xù)看了兩三篇關(guān)于immutable.js的文章,傳統(tǒng)的object和array等引用類型是mutable數(shù)據(jù),就是當(dāng)賦值的時(shí)候,指向同個(gè)內(nèi)存,這在react更新機(jī)制里面就會(huì)出現(xiàn)個(gè)問題,引用是相同的,react purecomponent就會(huì)檢測(cè)不出前后兩個(gè)props的不同部分,就不會(huì)re-render,而React.Component是可以檢測(cè)出來(lái)props的更新的,然后就會(huì)re-render,比如一個(gè)組件的props改變(數(shù)據(jù)流是單向的)該組件的props改變只需要其對(duì)應(yīng)的父組件更新就可以了,不需要該組件的兄弟組件及其子組件更新,因?yàn)樵鷍s引用類型共享內(nèi)存,這些組件都會(huì)更新,這是我們不想看到的,所以引入了immutable.js共享部分內(nèi)存,把直接相關(guān)的節(jié)點(diǎn)更新就可以了。

Immutable.js 以及在 react+redux 項(xiàng)目中的實(shí)踐
react Performance Tools 入門
使用immutable優(yōu)化React

2. 模塊或者組件按需加載

React Loadable 簡(jiǎn)介
webpack 構(gòu)建性能優(yōu)化策略小結(jié)
react項(xiàng)目?jī)?yōu)化之webpack
react-router按需加載(V4版)

使用import()實(shí)現(xiàn)組件的按需加載

根據(jù)點(diǎn)擊的鏈接會(huì)在head標(biāo)簽里插入



發(fā)現(xiàn)個(gè)很有趣的現(xiàn)象,點(diǎn)擊About鏈接或者DashBoard鏈接兩個(gè)組件相互切換,在同個(gè)頁(yè)面的路由組件,路由切換的話,前面一個(gè)渲染好的組件會(huì)Unmount,即被卸載
例如路由about->dashboard,About組件會(huì)被卸載(componentWillUnmount被調(diào)用),DashBoard被裝載(componentWillMount被調(diào)用),


由下圖可以看出,路由導(dǎo)航到dashboard的時(shí)候About組件并沒有被包含在其Route組件里,也就是切換路由的時(shí)候About被卸載了,移出了dom

倉(cāng)庫(kù):assassin / react-starter

參考:

在react-router4中進(jìn)行代碼拆分(基于webpack)
HTML5 <script>元素async,defer異步加載

3.試讀react-redux源碼

本文的react-redux代碼本版為5.0.6

阮一峰的Redux 入門教程(三):React-Redux 的用法

class VisibleTodoList extends Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() =>
      this.forceUpdate()
    );
  }

  render() {
    const props = this.props;
    const { store } = this.context;
    const state = store.getState();
    // ...
  }
}

VisibleTodoList.contextTypes = {
  store: React.PropTypes.object
}

React-Redux自動(dòng)生成的容器組件的代碼,就類似上面這樣,從而拿到store
這句話不是很理解,對(duì)比了下官方給出的代碼:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

const mapStateToProps = (state) => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

const mapDispatchToProps = {
  onTodoClick: toggleTodo
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

和大神說(shuō)的自動(dòng)生成的容器組件的代碼完全不同,現(xiàn)在的理解應(yīng)該是connect以后得到的容器組件的代碼,而不是現(xiàn)在我們看到的官網(wǎng)的容器組件的代碼

今天看到了connectAdvanced.js的最后一句卡住了return hoistStatics(Connect, WrappedComponent)
import hoistStatics from 'hoist-non-react-statics'來(lái)自于hoist-non-react-statics具體干啥用的還不清楚,搜索它怎么用的時(shí)候發(fā)現(xiàn)了官網(wǎng)高階組件里面提到了這個(gè)庫(kù),于是再次看了遍高階組件的用法,如是說(shuō):高階組件是一個(gè)函數(shù),能夠接受一個(gè)組件并返回一個(gè)新的組件,結(jié)合實(shí)際的react-redux的connect功能,

import TodoList from '../components/TodoList'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

connect.js


connect.js

connect.js調(diào)用了connectAdvanced.js
connectAdvanced.js


connectAdvanced.js
connect()(TodoList)返回的新組件

那么如果從高階組件的定義高階組件是一個(gè)函數(shù),能夠接受一個(gè)組件并返回一個(gè)新的組件來(lái)看connectAdvanced.js中的wrapWithConnect函數(shù)就是高階組件,它接受了一個(gè)WrappedComponent組件返回了一個(gè)<Connect(TodoList)>...</Connect(TodoList)>新的組件

displayName其實(shí)是組件的一個(gè)靜態(tài)屬性,如果在組件中定義則有,否則不會(huì)有該屬性
靜態(tài)屬性在es6的不同版本有不同的定義方式:

export default class MainSection extends Component {
  static propTypes = {//先進(jìn)的一種
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
  }
}
//原始的一種
MainSection.propTypes={
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
}

到目前的理解,使用高階組件的目的有

  • 抽取很多組件的公共方法和屬性,類似于之前的mixin
  • 返回的新組件必須保留原始組件的功能(包括原始組件的靜態(tài)方法和靜態(tài)屬性)
    connectAdvanced.js
import hoistStatics from 'hoist-non-react-statics'

export default function connectAdvanced(){
  return function wrapWithConnect(WrappedComponent) {
    class Connect extends Component {
   }

    Connect.WrappedComponent = WrappedComponent
    Connect.displayName = displayName
    Connect.childContextTypes = childContextTypes
    Connect.contextTypes = contextTypes
    Connect.propTypes = contextTypes

    if (process.env.NODE_ENV !== 'production') {
    }

    return hoistStatics(Connect, WrappedComponent)//原始組件的所有靜態(tài)方法全部拷貝給新組件
  }
}
}

上下文(Context)
react-redux源碼分析
react-redux源碼分析
react-redux 源碼解析

一個(gè)有意思的發(fā)現(xiàn):

class Animal{
  constructor(){
    this.age=""
  }
  showAge(){
    console.info(this.age)
  }
  getName=()=>{
    return "name"  
  }
}

使用ts編譯為js

var Animal = /** @class */ (function () {
    function Animal() {
        this.getName = function () {
            return "name";
        };
        this.age = "";
    }
    Animal.prototype.showAge = function () {
        console.info(this.age);
    };
    return Animal;
}());

4.高階組件的兩種實(shí)現(xiàn)方式

看這篇文章帶著三個(gè)問題一起深入淺出React高階組件的時(shí)候發(fā)現(xiàn)有個(gè)有趣的現(xiàn)象:父組件可以直接調(diào)用子組件的實(shí)例方法,這在Java中是不可能的,具體可查看Java 中父類怎么調(diào)用子類的方法?,這篇文章指出可以使用反射的方式,js真的不按套路出牌啊

深入理解 React 高階組件
React進(jìn)階之高階組件
React高階組件探究
React 高階組件(HOC)入門指南

5.木偶組件和智能組件

在 2017 年學(xué)習(xí) React + Redux 的一些建議(上篇)

react root組件下面應(yīng)該放什么組件?

6.按需加載 包括saga

react結(jié)合redux和react-router開發(fā)大型應(yīng)用實(shí)現(xiàn)按需加載(code spliting)
React Router v4 之代碼分割:從放棄到入門

7.在代碼提交之前需要對(duì)代碼進(jìn)行l(wèi)int和語(yǔ)法檢查

需要用到庫(kù):
okonet/lint-staged
typicode/husky
prettier/prettier

從React腳手架工具學(xué)習(xí)React項(xiàng)目的最佳實(shí)踐(上):前端基礎(chǔ)配置
前端開發(fā)如何讓持續(xù)集成/持續(xù)部署(CI/CD)跑起來(lái)

github 集成測(cè)試
前端開源項(xiàng)目持續(xù)集成三劍客

8.用js的方式改變子組件的props
import RadioButton from './radioButton'
children = React.Children.map(children, (child: any) => {
        if (child.type === RadioButton) {
          return React.cloneElement(child, {
            prefixCls: radioType === 'text' ? 'radio-text' : 'radio-button', //手動(dòng)改變了prefixCls props
          })
        } else {
          return child
        }
      })

React中props.children和React.Children的區(qū)別

9. 在生產(chǎn)環(huán)境中使用LogRocket記錄Redux日志
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容