React でフックを使用する利点は何ですか

react でフックを使用する利点: 1. ロジックの再利用が簡素化され、コードの再利用が容易になります。フックにより、開発者はコンポーネント構造を変更せずに状態ロジックを再利用できます。2. フックにより、同じビジネス ロジックのコードが可能になります。ビジネス ロジックを明確に分離するために集約され、コードの理解と保守が容易になります。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

フックは React 16.8 の新機能です。特に関数型コンポーネントで使用されます。クラス コンポーネント内の反応の他の機能を置き換えることができ、実際の作業でよく使用されます。

フックとは

フックはフックと訳され、外部関数にフックする機能コンポーネント内の関数です。

React はいくつかの共通フックを提供しており、React は関数に外部関数を導入するために使用されるカスタム フックもサポートしています。

外部関数をコンポーネントに導入する必要がある場合、React が提供するフックを使用するか、フックをカスタマイズできます。

例えば、コンポーネントに状態を管理する機能を導入する場合、useState関数を使用することができますが、useStateの使い方については、以下で詳しく紹介します。

#フックを使用する理由 (フックを使用する利点)

フックを使用する主な理由は 2 つあります:

• ロジックの再利用を簡素化します;

• 複雑なコンポーネントを理解しやすくします。

1. ロジックの再利用を簡素化し、コードの再利用を容易にする

フックが登場する前、React は高次のコンポーネントを借用してレンダリングする必要がありました。プロップなどの複雑なデザイン パターンはロジックの再利用を実現できますが、上位のコンポーネントは冗長なコンポーネント ノードを生成するため、デバッグがより複雑になります。

フックを使用すると、コンポーネント構造を変更せずに状態ロジックを再利用できます。

たとえば、頻繁に使用される antd テーブルは、いくつかの状態を維持し、適切なタイミングで変更する必要があることがよくあります。

componentDidMount(){
 this.loadData();
}
loadData = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
     dataSource: xxx[]
   })
}
onTableChange = ()=>{
   this.setState({
     current: xxx,
     total: xxx,
     pageSize: xxx,
   })
}
render(){
 const {total,pageSize,current,dataSource} = this.state;
 return <Table
  dataSource={dataSource}
  pagination={{total,pageSize,current}
  onChange={this.onTableChange}
 />
}

各テーブルはこれらの一部を書き込む必要があります。ロジックによれば、魚を釣るまでの残り時間。これらの非常に類似したロジックは、高次コンポーネントをカプセル化することで抽象化できます。この上位コンポーネントにはこれらの状態が付属しており、サーバーを自動的に呼び出してリモート データを取得できます。

上位コンポーネントで実装した場合は次のようになります:

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        tableProps: xxx, 
      };
      render() {
        const { tableProps } = this.state;
        return <WrappedComponent tableProps={tableProps} />;
      }
    };
  };
}
@useTable(server)
class App extends Component{
  render(){
    const { tableProps } = this.props;
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性。
        {...tableProps}
      />
    )
  }
}

フックで実装した場合は次のようになります:

import { Table } from 'antd'
import server from './api'
function useTable(server) {
  const [tableProps, setTableProps] = useState(xxx);
  return tableProps;
}
function App {
    const { tableProps } = useTable();
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等属性
        {...tableProps}
      />
    )
}
/*

高位コンポーネントとの比較-order コンポーネント "grandfather=> ;Parent=>Child" はレイヤーごとにネストされており、

フックは次のようになります:

const { brother1 } = usehook1; 
const { brother2} = usehook2;
*/

フックのロジックがより明確になり、可読性が向上します。

2. 複雑なコンポーネントを理解しやすくする

クラス コンポーネントでは、同じビジネス ロジックのコードがコンポーネントのさまざまなライフ サイクル関数とフックに分散されています。同じビジネス ロジックのコードを集約してビジネス ロジックを明確に分離し、コードの理解と保守を容易にします。

[関連する推奨事項:

Redis ビデオ チュートリアル ]

以上がReact でフックを使用する利点は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。