1.immutable
連續(xù)看了兩三篇關(guān)于immutable.js的文章凳宙，傳統(tǒng)的object和array等引用類(lèi)型是mutable數(shù)據(jù)熙揍，就是當(dāng)賦值的時(shí)候，指向同個(gè)內(nèi)存氏涩，這在react更新機(jī)制里面就會(huì)出現(xiàn)個(gè)問(wèn)題届囚，引用是相同的，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引用類(lèi)型共享內(nèi)存蛔添，這些組件都會(huì)更新，這是我們不想看到的兜辞，所以引入了immutable.js共享部分內(nèi)存迎瞧，把直接相關(guān)的節(jié)點(diǎn)更新就可以了。
Immutable.js 以及在 react+redux 項(xiàng)目中的實(shí)踐
react Performance Tools 入門(mén)
使用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è)面的路由組件，路由切換的話(huà)扫皱，前面一個(gè)渲染好的組件會(huì)Unmount足绅，即被卸載
例如路由about->dashboard捷绑，About組件會(huì)被卸載（componentWillUnmount被調(diào)用），DashBoard被裝載（componentWillMount被調(diào)用）氢妈，
由下圖可以看出粹污，路由導(dǎo)航到dashboard的時(shí)候About組件并沒(méi)有被包含在其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 入門(mén)教程（三）：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)生成的容器組件的代碼厕怜，就類(lèi)似上面這樣，從而拿到store
這句話(huà)不是很理解蕾总，對(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調(diào)用了connectAdvanced.js
connectAdvanced.js
那么如果從高階組件的定義高階組件是一個(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
}
到目前的理解，使用高階組件的目的有
- 抽取很多組件的公共方法和屬性蜒程，類(lèi)似于之前的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è)問(wèn)題一起深入淺出React高階組件的時(shí)候發(fā)現(xiàn)有個(gè)有趣的現(xiàn)象：父組件可以直接調(diào)用子組件的實(shí)例方法绅你，這在Java中是不可能的，具體可查看Java 中父類(lèi)怎么調(diào)用子類(lèi)的方法昭躺？,這篇文章指出可以使用反射的方式忌锯，js真的不按套路出牌啊
深入理解 React 高階組件
React進(jìn)階之高階組件
React高階組件探究
React 高階組件(HOC)入門(mén)指南
5.木偶組件和智能組件
在 2017 年學(xué)習(xí) React + Redux 的一些建議（上篇）
react root組件下面應(yīng)該放什么組件？
6.按需加載 包括saga
react結(jié)合redux和react-router開(kāi)發(fā)大型應(yīng)用實(shí)現(xiàn)按需加載（code spliting）
React Router v4 之代碼分割：從放棄到入門(mén)
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ǔ)配置
前端開(kāi)發(fā)如何讓持續(xù)集成/持續(xù)部署(CI/CD)跑起來(lái)
github 集成測(cè)試
前端開(kāi)源項(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
}
})
