🤴🏿 🕝 📬 機能部品 ⚰️ 🔏 👩🏾‍🤝‍👨🏿

ことわざにあるように、編集部は「詳細を説明してもらえますか？」という手紙を受け取りました。

最初に、クラスにコンポーネントがありました。

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)

機能部品

特集記事

More articles: