摘要：我們可以通過剛剛高階函數的思想來創建一個中間組件，也就是我們說的高階組件。僅傳遞組件所需要的屬性。在受控組件中，表單數據由組件負責處理。作為頂層組件接收一個名為的，可以接收任意需要被放入中的字符串，數字，甚至是函數。

下面是一個可能會經常寫的組件，評論列表組件，數據交互和展示都放到了一個組件里面。

// CommentList.js
class CommentList extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: "json",
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return 
 {this.state.comments.map(renderComment)} 
;
  }
  renderComment({body, author}) {
    return 
{body}—{author}
;
  }
}

我們對上面的組件進行拆分，把他拆分成容器組件 CommentListContainer.js 和展示組件 CommentList。

// CommentListContainer.js
class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: "json",
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return ;
  }
}


// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    return 
 {this.props.comments.map(renderComment)} 
;
  }
  renderComment({body, author}) {
    return 
{body}—{author}
;
  }
}

優勢：

展示和容器更好的分離，更好的理解應用程序和UI

重用性高，展示組件可以用于多個不同的state數據源

展示組件就是你的調色板，可以把他們放到多帶帶的頁面，在不影響應用程序的情況下，讓設計師調整UI

迫使你分離標簽，達到更高的可用性

下面是一個最簡單的無狀態組件的例子：

function HelloComponent(props, /* context */) {
  return 
Hello {props.name}
}
ReactDOM.render(, mountNode)

可以看到，原本需要寫“類”定義（React.createClass 或者 class YourComponent extends React.Component）來創建自己組件的定義（有狀態組件），現在被精簡成了只寫一個 render 函數。更值得一提的是，由于僅僅是一個無狀態函數，React 在渲染的時候也省掉了將“組件類” 實例化的過程。

結合 ES6 的解構賦值，可以讓代碼更精簡。例如下面這個 Input 組件：

function Input({ label, name, value, ...props }, { defaultTheme }) {
  const { theme, autoFocus, ...rootProps } = props
  return (
    
    
  )}
Input.contextTypes = {defaultTheme: React.PropTypes.object};

無狀態組件不像上述兩種方法在調用時會創建新實例，它創建時始終保持了一個實例，避免了不必要的檢查和內存分配，做到了內部優化。

無狀態組件不支持 "ref"

高階組件通過函數和閉包,改變已有組件的行為,本質上就是 Decorator 模式在 React 的一種實現。

當寫著寫著無狀態組件的時候，有一天忽然發現需要狀態處理了，那么無需徹底返工:)
往往我們需要狀態的時候，這個需求是可以重用的。

高階組件加無狀態組件，則大大增強了整個代碼的可測試性和可維護性。同時不斷“誘使”我們寫出組合性更好的代碼。

function welcome() {
    let username = localStorage.getItem("username");
    console.log("welcome " + username);
}

function goodbey() {
    let username = localStorage.getItem("username");
    console.log("goodbey " + username);
}

welcome();
goodbey();

我們發現兩個函數有一句代碼是一樣的，這叫冗余唉。(平時可能會有一大段代碼的冗余)。

下面我們要寫一個中間函數，讀取username,他來負責把username傳遞給兩個函數。

function welcome(username) {
    console.log("welcome " + username);
}

function goodbey(username) {
    console.log("goodbey " + username);
}

function wrapWithUsername(wrappedFunc) {
    let newFunc = () => {
        let username = localStorage.getItem("username");
        wrappedFunc(username);
    };
    return newFunc;
}

welcome = wrapWithUsername(welcome);
goodbey = wrapWithUsername(goodbey);

welcome();
goodbey();

好了，我們里面的 wrapWithUsername 函數就是一個“高階函數”。
他做了什么？他幫我們處理了 username，傳遞給目標函數。我們調用最終的函數 welcome的時候，根本不用關心 username是怎么來的。

下面是兩個冗余的組件。

import React, {Component} from "react"

class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }

    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        })
    }

    render() {
        return (
            
welcome {this.state.username}
        )
    }
}

export default Welcome;

import React, {Component} from "react"

class Goodbye extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }

    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        })
    }

    render() {
        return (
            
goodbye {this.state.username}
        )
    }
}

export default Goodbye;

我們可以通過剛剛高階函數的思想來創建一個中間組件，也就是我們說的高階組件。

import React, {Component} from "react"

export default (WrappedComponent) => {
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                username: ""
            }
        }

        componentWillMount() {
            let username = localStorage.getItem("username");
            this.setState({
                username: username
            })
        }

        render() {
            return 
        }
    }

    return NewComponent
}

import React, {Component} from "react";
import wrapWithUsername from "wrapWithUsername";

class Welcome extends Component {

    render() {
        return (
            
welcome {this.props.username}
        )
    }
}

Welcome = wrapWithUsername(Welcome);

export default Welcome;

import React, {Component} from "react";
import wrapWithUsername from "wrapWithUsername";

class Goodbye extends Component {

    render() {
        return (
            
goodbye {this.props.username}
        )
    }
}

Goodbye = wrapWithUsername(Goodbye);

export default Goodbye;

看到沒有，高階組件就是把 username 通過 props 傳遞給目標組件了。目標組件只管從 props里面拿來用就好了。

為了代碼的復用性，我們應該盡量減少代碼的冗余。

提取共享的state,如果有兩個組件都需要加載同樣的數據，那么他們會有相同的 componentDidMount 函數。

找出重復的代碼,每個組件中constructor 和 componentDidMount都干著同樣的事情，另外，在數據拉取時都會顯示Loading... 文案，那么我們應該思考如何使用高階組件來提取這些方法。

遷移重復的代碼到高階組件

包裹組件，并且使用props替換state

盡可能地簡化

使用react時，組件或容器的代碼在根本上必須只負責一塊UI功能。

如果組件根本不需要狀態，那么就使用函數定義的無狀態組件。

從性能上來說，函數定義的無狀態組件 > ES6 class 定義的組件 > 通過 React.createClass() 定義的組件。

僅傳遞組件所需要的屬性。只有當屬性列表太長時，才使用{...this.props}進行傳遞。

如果組件里面有太多的判斷邏輯（if-else語句）通常意味著這個組件需要被拆分成更細的組件或模塊。

使用明確的命名能夠讓開發者明白它的功能，有助于組件復用。

在shouldComponentUpdate中避免不必要的檢查.

盡量使用不可變數據類型(Immutable).

編寫針對產品環境的打包配置(Production Build).

通過Chrome Timeline來記錄組件所耗費的資源.

在componentWillMount或者componentDidMount里面通過setTimeOut或者requestAnimationFram來延遲執行那些需要大量計算的任務.

在大多數情況下，我們推薦使用受控組件來實現表單。在受控組件中，表單數據由 React 組件負責處理。下面是一個典型的受控組建。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      

        
          
        
        
      
    );
  }
}

設置表單元素的value屬性之后，其顯示值將由this.state.value決定，以滿足React狀態的同一數據理念。每次鍵盤敲擊之后會執行handleChange方法以更新React狀態，顯示值也將隨著用戶的輸入改變。

對于受控組件來說，每一次 state(狀態)變化都會伴有相關聯的處理函數。這使得可以直接修改或驗證用戶的輸入和提交表單。

因為不受控組件的數據來源是 DOM 元素，當使用不受控組件時很容易實現 React 代碼與非 React 代碼的集成。如果你希望的是快速開發、不要求代碼質量，不受控組件可以一定程度上減少代碼量。否則。你應該使用受控組件。

一般情況下不受控組件我們使用ref來獲取DOM元素進行操作。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      

        
          Name:
           this.input = input} />
        
        
      
    );
  }
}

const sampleComponent = () => {
  return isTrue ? 
True!
 : 
false！
};

const sampleComponent = () => {
  return isTrue ? 
True!
 : 
};

const sampleComponent = () => {
  return isTrue && 
True!
};

需要注意的是如果isTrue 為 0 ，其實會轉換成 false，但是在頁面中顯示的時候，&&還是會返回0顯示到頁面中。

// 問題代碼
const sampleComponent = () => {
  return (
    

      {flag && flag2 && !flag3
        ? flag4
        ? 
Blah
        : flag5
        ? 
Meh
        : 
Herp
        : 
Derp
      }
    
  )
};

解決方案：

最佳方案: 將邏輯移到子組件內部

使用IIFE(Immediately-Invoked Function Expression 立即執行函數)

滿足條件的時候使用return強制跳出函數

const sampleComponent = () => {
  const basicCondition = flag && flag2 && !flag3;
  if (!basicCondition) return 
Derp
;
  if (flag4) return 
Blah
;
  if (flag5) return 
Meh
;
  return 
Herp
}

在某些情況下，React框架出于性能優化考慮，可能會將多次state更新合并成一次更新。正因為如此，setState實際上是一個異步的函數。 如果在調用setState()函數之后嘗試去訪問this.state，你得到的可能還是setState()函數執行之前的結果。

但是，有一些行為也會阻止React框架本身對于多次state更新的合并，從而讓state的更新變得同步化。 比如: eventListeners, Ajax, setTimeout 等等。

React框架之所以在選擇在調用setState函數之后立即更新state而不是采用框架默認的方式，即合并多次state更新為一次更新，是因為這些函數調用(fetch,setTimeout等瀏覽器層面的API調用)并不處于React框架的上下文中，React沒有辦法對其進行控制。React在此時采用的策略就是及時更新，確保在這些函數執行之后的其他代碼能拿到正確的數據（即更新過的state)。

根據React官方文檔，setState函數實際上接收兩個參數，其中第二個參數類型是一個函數，作為setState函數執行后的回調。通過傳入回調函數的方式，React可以保證傳入的回調函數一定是在setState成功更新this.state之后再執行。

this.setState({count: 1}, () => {
    console.log(this.state.count); // 1
})

ReactComponent.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === "object" ||
    typeof partialState === "function" ||
    partialState == null,
    "setState(...): takes an object of state variables to update or a " +
    "function which returns an object of state variables."
  );
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, "setState");
  }
};

updater的這兩個方法，和React底層的Virtual Dom(虛擬DOM樹)的diff算法有緊密的關系，所以真正決定同步還是異步的其實是Virtual DOM的diff算法。

在React中，想做依賴注入(Dependency Injection)其實相當簡單。可以通過props來進行傳遞。但是，如果組件數量很多，并且組件嵌套層次很深的話，這種方式就不太合適。

// inject.jsx
var title = "React Dependency Injection";
export default function inject(Component) {
  return class Injector extends React.Component {
    render() {
      return (
        
      )
    }
  };
}

// Title.jsx
export default function Title(props) {
  return 
{ props.title }
;
}

// Header.jsx
import inject from "./inject.jsx";
import Title from "./Title.jsx";

var EnhancedTitle = inject(Title);
export default function Header() {
  return (
    

      
    
  );
}

React v16.3.0 之前的 Context:

var context = { title: "React in patterns" };
class App extends React.Component {
  getChildContext() {
    return context;
  }
  // ...
}

App.childContextTypes = {
  title: PropTypes.string
};

class Inject extends React.Component {
  render() {
    var title = this.context.title;
  // ...
  }
}
Inject.contextTypes = {
  title: PropTypes.string
};

之前的 Context 作為一個實驗性質的 API，直到 React v16.3.0 版本前都一直不被官方所提倡去使用，其主要原因就是因為在子組件中使用 Context 會破壞 React 應用的分型架構。

這里的分形架構指的是從理想的 React 應用的根組件樹中抽取的任意一部分都仍是一個可以直接運行的子組件樹。在這個子組件樹之上再包一層，就可以將它無縫地移植到任意一個其他的根組件樹中。

但如果根組件樹中有任意一個組件使用了支持透傳的 Context API，那么如果把包含了這個組件的子組件樹多帶帶拿出來，因為缺少了提供 Context 值的根組件樹，這時的這個子組件樹是無法直接運行的。

并且他有一個致命缺陷：任何一個中間傳遞的組件shouldComponentUpdate 函數返回false，組件都不會得到更新。

新的Context Api

新的Context Api 采用聲明式的寫法，并且可以透過shouldComponentUpdate 函數返回false的組件繼續向下傳播，以保證目標組件一定可以接收到頂層組件 Context 值的更新，一舉解決了現有 Context API 的兩大弊端，也終于成為了 React 中的第一級（first-class） API。

新的 Context API 分為三個組成部分：

React.createContext 用于初始化一個 Context。

XXXContext.Provider作為頂層組件接收一個名為 value的 prop，可以接收任意需要被放入 Context 中的字符串，數字，甚至是函數。

XXXContext.Consumer作為目標組件可以出現在組件樹的任意位置（在 Provider 之后），接收 children prop，這里的 children 必須是一個函數（context => ()）用來接收從頂層傳來的 Context。

const ThemeContext = React.createContext("light");

class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

function Toolbar(props) {
  return (
    

      
    
  );
}

function ThemedButton(props) {
  return (
    
      {theme => }
    
  );
}

class Switcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "React in patterns" };
  }
  render() {
    return (
      
        click me
      
    );
  }

  _handleButtonClick() {
    console.log(`Button is clicked inside ${ this.state.name }`);
    // 將導致
    // Uncaught TypeError: Cannot read property "state" of null
  }
}

我們可以通過下面三種方式簡單實現this指向的綁定：

在constructor 中事先綁定 this._buttonClick = this._handleButtonClick.bind(this);

調用時使用箭頭函數 this._buttonClick() }>

ES7中的綁定操作符

給setState傳入回調函數

setState() 不僅能接受一個對象，還能接受一個函數作為參數呢，該函數接受該組件前一刻的 state 以及當前的 props 作為參數，計算和返回下一刻的 state。

// assuming this.state.count === 0
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
// this.state.count === 1, not 3

this.setState((prevState, props) => ({
  count: prevState.count + props.increment
}));

// Passing object
this.setState({ expanded: !this.state.expanded });

// Passing function
this.setState(prevState => ({ expanded: !prevState.expanded }));

組件切換技巧

import HomePage from "./HomePage.jsx";
import AboutPage from "./AboutPage.jsx";
import UserPage from "./UserPage.jsx";
import FourOhFourPage from "./FourOhFourPage.jsx";

const PAGES = {
  home: HomePage,
  about: AboutPage,
  user: UserPage
};

const Page = (props) => {
  const Handler = PAGES[props.page] || FourOhFourPage;

  return 
};

React style 組件分類

基礎組件， 布局組件， 排版組件

給無狀態的純UI組件應用樣式

請保持樣式遠離那些離不開state的組件. 比如路由, 視圖, 容器, 表單, 布局等等不應該有任何的樣式或者css class出現在組件上. 相反, 這些復雜的業務組件應該有一些帶有基本功能的無狀態UI組件組成.

class SampleComponent extends Component {
  render() {
    return (
      

        
        
        
        

) } } // 表達組件(帶樣式) const Button = ({ ...props }) => { const sx = { fontFamily: "inherit", fontSize: "inherit", fontWeight: "bold", textDecoration: "none", display: "inline-block", margin: 0, paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, border: 0, color: "white", backgroundColor: "blue", WebkitAppearance: "none", MozAppearance: "none" } return ( ) } 樣式模塊(style module)

一般來說, 在組件內寫死(hard code)樣式應該是要被避免的. 這些有可能被不同的UI組件分享的樣式應該被分開放入對應的模塊中.

// 樣式模塊
export const white = "#fff";
export const black = "#111";
export const blue = "#07c";

export const colors = {
  white,
  black,
  blue
};

export const space = [
  0,
  8,
  16,
  32,
  64
];

const styles = {
  bold: 600,
  space,
  colors
};

export default styles

// button.jsx
import React from "react"
import { bold, space, colors } from "./styles"

const Button = ({
  ...props
  }) => {
  const sx = {
    fontFamily: "inherit",
    fontSize: "inherit",
    fontWeight: bold,
    textDecoration: "none",
    display: "inline-block",
    margin: 0,
    paddingTop: space[1],
    paddingBottom: space[1],
    paddingLeft: space[2],
    paddingRight: space[2],
    border: 0,
    color: colors.white,
    backgroundColor: colors.blue,
    WebkitAppearance: "none",
    MozAppearance: "none"
  };

  return (
    

) }; 樣式函數(Style Functions)

// Modular powers of two scale
const scale = [
  0,
  8,
  16,
  32,
  64
];

// 通過這個函數去取得一部分的樣式
const createScaledPropertyGetter = (scale) => (prop) => (x) => {
  return (typeof x === "number" && typeof scale[x] === "number")
    ? {[prop]: scale[x]}
    : null
};
const getScaledProperty = createScaledPropertyGetter(scale);

export const getMargin = getScaledProperty("margin");
export const getPadding = getScaledProperty("padding");
// 樣式函數的用法
const Box = ({
  m,
  p,
  ...props
  }) => {
  const sx = {
    ...getMargin(m),
    ...getPadding(p)
  };

  return 

};

// 組件用法.
const Box = () => (
  

    
      A box with 16px margin and 32px padding
    
  
);

常見小坑 state不更新？

class SampleComponent extends Component {
  // constructor function (or getInitialState)
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      inputVal: props.inputValue
    };
  }

  render() {
    return 
{this.state.inputVal && }
  }
}

這樣做的危險在于, 有可能組件的props發生了改變但是組件卻沒有被更新. 新的props的值不會被React認為是更新的數據因為構造器constructor或者getInitialState方法在組件創建之后不會再次被調用了,因此組件的state不再會被更新。 要記住, State的初始化只會在組件第一次初始化的時候發生。

class SampleComponent extends Component {
  // constructor function (or getInitialState)
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    };
  }

  render() {
    return 
{this.props.inputValue && }
  }
}

更干凈的render函數?

更干凈的render函數? 這個概念可能會有點讓人疑惑.

其實在這里干凈是指我們在shouldComponentUpdate這個生命周期函數里面去做淺比較, 從而避免不必要的渲染.

class Table extends PureComponent {
  render() {
    return (
      

        {this.props.items.map(i =>
          
        )}
      
    );
  }
}

這種寫法的問題在于{this.props.options || []} 這種寫法會導致所有的Cell都被重新渲染即使只有一個cell發生了改變. 為什么會發生這種事呢?

仔細觀察你會發現, options這個數組被傳到了Cell這個組件上, 一般情況下, 這不會導致什么問題. 因為如果有其他的Cell組件, 組件會在有props發生改變的時候淺對比props并且跳過渲染(因為對于其他Cell組件, props并沒有發生改變). 但是在這個例子里面, 當options為null時, 一個默認的空數組就會被當成Props傳到組件里面去. 事實上每次傳入的[]都相當于創建了新的Array實例. 在JavaScript里面, 不同的實例是有不同的實體的, 所以淺比較在這種情況下總是會返回false, 然后組件就會被重新渲染. 因為兩個實體不是同一個實體. 這就完全破壞了React對于我們組件渲染的優化.

const defaultval = [];  // <---  也可以使用defaultProps
class Table extends PureComponent {
  render() {
    return (
      

        {this.props.items.map(i =>
          
        )}
      
    );
  }
}

還是多次重新渲染

class App extends PureComponent {
  render() {
    return  this.props.update(e.target.value)}/>;
  }
}

class App extends PureComponent {
  update(e) {
    this.props.update(e.target.value);
  }

  render() {
    return ;
  }
}

在上面的兩個壞實踐中, 每次我們都會去創建一個新的函數實體. 和第一個例子類似, 新的函數實體會讓我們的淺比較返回false, 導致組件被重新渲染. 所以我們需要在更早的時候去bind我們的函數.

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.update = this.update.bind(this);
  }

  update(e) {
    this.props.update(e.target.value);
  }

  render() {
    return ;
  }
}

命名 引用命名

React模塊名使用帕斯卡命名，實例使用駱駝式命名

// bad
import reservationCard from "./ReservationCard";

// good
import ReservationCard from "./ReservationCard";

// bad
const ReservationItem = ;

// good
const reservationItem = ;

高階模塊命名

// bad
export default function withFoo(WrappedComponent) {
  return function WithFoo(props) {
    return ;
  }
}

// good
export default function withFoo(WrappedComponent) {
  function WithFoo(props) {
    return ;
  }

  const wrappedComponentName = WrappedComponent.displayName
    || WrappedComponent.name
    || "Component";

  WithFoo.displayName = `withFoo(${wrappedComponentName})`;
  return WithFoo;
}

屬性命名

避免使用DOM相關的屬性來用作其他的用途。

// bad


// good

私有函數添加 _ 前綴?

在React模塊中，不要給所謂的私有函數添加 _ 前綴，本質上它并不是私有的。

為什么？_ 下劃線前綴在某些語言中通常被用來表示私有變量或者函數。但是不像其他的一些語言，在JS中沒有原生支持所謂的私有變量，所有的變量函數都是共有的。盡管你的意圖是使它私有化，在之前加上下劃線并不會使這些變量私有化，并且所有的屬性（包括有下劃線前綴及沒有前綴的）都應該被視為是共有的。

Ordering React 模塊生命周期

class extends React.Component 的生命周期函數:
可選的 static 方法

constructor 構造函數

getChildContext 獲取子元素內容

componentWillMount 模塊渲染前

componentDidMount 模塊渲染后

componentWillReceiveProps 模塊將接受新的數據

shouldComponentUpdate 判斷模塊需不需要重新渲染

componentWillUpdate 上面的方法返回 true， 模塊將重新渲染

componentDidUpdate 模塊渲染結束

componentWillUnmount 模塊將從DOM中清除, 做一些清理任務

點擊回調或者事件處理器 如 onClickSubmit() 或 onChangeDescription()

render 里的 getter 方法 如 getSelectReason() 或 getFooterContent()

可選的 render 方法 如 renderNavigation() 或 renderProfilePicture()

render render() 方法

如何定義 propTypes, defaultProps, contextTypes, 等等其他屬性...

import React from "react";
import PropTypes from "prop-types";

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: "Hello World",
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return {this.props.text};
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;