ことわざにあるように、編集部は「詳細を説明してもらえますか？」という手紙を受け取りました。
最初に、クラスにコンポーネントがありました。
class Square extends React.Component { constructor() { super() this.state = { value: null, } } render() { const { value, onClick } = this.props return ( <button className="square" onClick={onClick}> {value} </button> ) } }
次に、機能コンポーネントが登場しました。
const Square = ({ value, onClick }) => {( <button className="square" onClick={onClick}> {value} </button> )}
違いは何ですか？ クラス宣言、コンストラクター（）、レンダリング（）、小道具を破壊するためのconst、これ。 そして、コンポーネントの状態が消えました-ステートレスな機能コンポーネントが得られます。
ローカル状態なしで生き続ける方法：1）または状態を保存する必要がない場合にのみ機能コンポーネントを適用します。 2）または状態全体をredux側に転送します（唯一の真実のソースとして）。 コンポーネントのローカル状態は、メンテナンスを必要とする抽象化の追加レイヤーです。 なんで？
接続の恐怖を克服することも望ましいです。すべてのプロパティを親コンポーネントにドラッグするのではなく、プロパティが使用されるときに子コンポーネントにconnect（）を使用することです。
理解しましたが、 PureComponentを機能コンポーネントに適用する方法は？ 高次コンポーネントテクノロジーが助けになります。
// utils.js import React from 'react' export const pureComponent = (fn) => { class Wrapper extends React.PureComponent { render() { return fn(this.props, this.context) } } // , .. , // -PureComponent; () // Wrapper.contextTypes = fn.contextTypes Wrapper.displayName = `PureComponent(${fn.name})` return Wrapper }
displayNameの割り当ては、React DevToolsの美しさのためです。 contextTypesの詳細については、 こちらをご覧ください 。
使用例：
import { pureComponent } from 'utils' const Square = ({ value, onClick }) => {( <button className="square" onClick={onClick}> {value} </button> )} export default pureComponent(Square)