Reactベストプラクティス

6322 ワード

javascript react.js

私の公開番号 Talkに注目してください.最新の記事を取得します.
はじめに
日常開発やCode Reviewでは、共通性の問題を発見することが多いです.提唱するべき方法もたくさんあります.本論文はReact技術スタックに対して、いくつかの最適な実践をまとめ、高品質のコードを作成するために一定の参考作用がある.
二、最適な実践&説明

Function Componentを多く使う

コンポーネントが純粋展示型の場合、stateやライフサイクルを維持する必要がない場合は、まずFunction Componentを使用します.これは次のような利点があります.

コードはより簡潔で、一見してわかるのは純粋な展示型で、複雑な業務ロジックがない

です.

は、より良い多重化されている.同じ構造のpropsが入ると,同じ界面が示され,副作用を考慮する必要はない.

より小さい包装体積、より高い実行効率

典型的なFunction Componentは以下のようです.

function MenuItem({menuId, menuText, onClick, activeId}) {
    return (
        
            {menuText}
        
    );
};

PureComponent

コンポーネントがstateを維持する必要がある場合やライフサイクルの方法を使う場合は、ComponentではなくPure Componentを優先的に使用します.Componentのデフォルトの行動はstateとpropsが変化しているかどうかに関わらず、レンダーをトリガします.Pure Componentはまずstateとpropsを浅い比較して、異なっている時にレンダーができます.次の例を見てください.

class Child extends React.Component {
  render() {
    console.log('render Child');
    return (
      
        {this.props.obj.num}
      
    );
  }
}

class App extends React.Component {
  state = {
    obj: { num: 1 }
  };

  onClick = () => {
    const {obj} = this.state;
    this.setState({obj});
  }

  render() {
    console.log('render Parent');
    return (
      
        
        
      
    );
  }
}

ボタンを押すと、パーティーとChildのrenderがトリガされます.ChildをPureComponentに変更すると、Childのrenderはトリガされません.propsはまだ同じ対象ですから.PartをPureComponentに変更すると、Partのrenderもトリガされなくなります.stateはまだ同じ対象ですから.

は単一職責原則に従い、HOC/装飾器/Render Propsを使用して職責を増加する.
例えば、共通のコンポーネントであれば、データソースは親のコンポーネントから送られてきたかもしれないし、あるいは自分から積極的にネットワークを通じてデータの取得を要求してきたかもしれない.この場合、まず純粋な展示型のFunction Componentを定義し、高次のコンポーネントを定義してデータを取得します.

function Comp() {
    ...
}

class HOC extends PureComponent {

    async componentDidMount() {
        const data = await fetchData();
        this.setState({data});
    }
    
    render() {
        return ();
    }
}

グループは、

を継承するより優れています.
筆者は実際のプロジェクトで、引き継ぎの形でコンポーネントを書いてみました.自分ですっきりと書いて、コードの多重性もいいですが、一番大きな問題は他の人が読めないことです.多重化された業務ロジックとUIのモデルは全部親に定義されています.サブクラスはいくつかのパラメータを入力して、父親のいくつかの方法をカバーするだけでいいです.簡単なコードは以下の通りです.

class Parent extends PureComponent {
    componentDidMount() {
        this.fetchData(this.url);
    }
    
    fetchData(url) {
        ...
    }
    
    render() {
        const data = this.calcData();
        return (
            {data}
        );
    }
}

class Child extends Parent {
    constructor(props) {
        super(props);
        this.url = 'http://api';
    }
    
    calcData() {
        ...
    }
} 
                   ，      ，          React        。                  render    ，              render   ，      。                  ，          ，             ，     。 
           ，         。                      。            ： 
 class Parent extends PureComponent {
    componentDidMount() {
        this.fetchData(this.props.url);
    }
    
    fetchData(url) {
        ...
    }
    
    render() {
        const data = this.props.calcData(this.state);
        return (
            {data}
        );
    }
}

class Child extends PureComponent {
    calcData(state) {
        ...
    }
    
    render() {
        
    }
} 
                ？ 
  
     props        ，      state               
  
           ： 
 componentWillReceiveProps(nextProps) {
    this.setState({num: nextProps.num});
}

render() {
    return(
        {this.state.num}
    );
}
numはコンポーネントの で の  もしないので、この  は  にthis.props.numを ってもいいです.は、レンデの でオブジェクト／  を  に  することを け、そうでなければ、サブコンポーネントが  レンデ
をもたらす.render() {
    const obj = {num: 1}
    
    return(
        {...}} />
    );
}
 のコードでは、たとえChildがPurComponentであっても、objとonClickは   しいオブジェクトであるため、Childはrenderに う.は、JSXにおいて  な    を くことを け、パッケージ  またはコンポーネントによって
を  すべきである.render() {
    const a = 8;
    
    return (
        
            {
                a > 0 ? a < 9 ? ... : ... : ...
            }
        
    );    
}
 のような れ の3   は   が  に いので、 のような で くことができます.f() {
    ...
}

render() {
    const a = 8;
    
    return (
        
            {
                this.f()
            }
        
    );    
}
は、Function Componentのprops 
のような  を く  する.const MenuItem = ({
    menuId, menuText, onClick, activeId,
}) => {
    return (
        ...
    );
};
コンポーネントを  する  、PropTypesとdefault Props 
を  する.
 は  の りですclass CategorySelector extends PureComponent {
    ...
}

CategorySelector.propTypes = {
    type: PropTypes.string,
    catList: PropTypes.array.isRequired,
    default: PropTypes.bool,
};

CategorySelector.defaultProps = {
    default: false,
    type: undefined,
};
  なラベルとスタイルの  を ける
  のような  には、   に  のdivは  であり、スタイルをコンポーネント に    するか、またはカスタマイズされたスタイルをパラメータとして  することができる.  :ServiceItemは  のところで う  があります.また、 くの なる  を ねて くと  です.// bad

    


// good
 、まとめ
  では、  がプロジェクトの  とCode Reviewの  でまとめたベスト10の  を  しました.その のいくつかの き と  は  の  だけを しています.これらの  の  を  し、  し、  したコードの  は  の  があります.もしあなたが なる  を っているならば、 いは  した  な  があったら、メッセージの  を  します.

＜div id=「right-1」class=「col-lg-12 col-sm-4 col-xs-4 ad」


＜div id=「right-2」class=「col-lg-12 col-sm-4 col-xs-4 ad」


＜div id=「right-3」class=「col-lg-12 col-sm-4 col-xs-4 ad」

多段リスト