반응에 후크를 사용하면 어떤 이점이 있나요?

반응에서 후크 사용의 이점: 1. 논리 재사용을 단순화하여 코드를 더 쉽게 재사용할 수 있습니다. 후크를 사용하면 개발자가 구성 요소 구조를 수정하지 않고도 상태 논리를 재사용할 수 있습니다. 2. 후크를 사용하면 개발자가 동일한 비즈니스를 대상으로 할 수 있습니다. 함께 집계되어 비즈니스 로직이 명확하게 분리되어 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

Hook은 React 16.8의 새로운 기능으로, 특히 기능적 컴포넌트에서 사용되며 클래스 컴포넌트에서 다른 React 기능을 대체할 수 있으며 실제 작업에서 흔히 사용됩니다.

후크란 무엇입니까

후크는 후크로 번역됩니다. 후크는 외부 기능에 대한 연결을 담당하는 기능 구성 요소 내의 기능입니다.

React는 몇 가지 일반적인 후크를 제공하며, React는 사용자 정의 후크도 지원합니다. 이러한 후크는 함수에 외부 기능을 도입하는 데 사용됩니다.

컴포넌트에 외부 기능을 도입해야 하는 경우 React에서 제공하는 후크를 사용하거나 후크를 사용자 정의할 수 있습니다.

예를 들어 컴포넌트에 상태 관리 기능을 도입한다면 useState 함수를 사용할 수 있습니다. useState의 사용법은 아래에서 자세히 소개하겠습니다.

Hook을 사용하는 이유(Hook 사용의 이점)

Hook를 사용하는 두 가지 주요 이유는 다음과 같습니다.

• 논리 재사용을 단순화합니다.

• 복잡한 구성 요소를 더 쉽게 이해할 수 있도록 합니다.

1. 로직 재사용을 단순화하여 코드 재사용을 더 쉽게 만듭니다

Hooks가 등장하기 전에 React는 로직 재사용을 위해 상위 구성 요소 및 렌더링 소품과 같은 복잡한 디자인 패턴을 빌려야 했지만, order 구성 요소는 중복 구성 요소 노드를 생성하므로 디버깅이 더욱 복잡해집니다.

Hook를 사용하면 구성 요소 구조를 수정하지 않고도 상태 논리를 재사용할 수 있습니다.

예를 들어 자주 사용되는 antd-table은 일부 상태를 유지하고 적절한 시점에 변경해야 하는 경우가 많습니다.

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}
      />
    )
}
/*

고차 컴포넌트 중첩 레이어와 비교 "할아버지 => parent => child" ,

hooks는 다음과 같습니다.

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

Hooks의 논리가 더 명확해지고 가독성이 더 좋아진 것을 볼 수 있습니다.

2. 복잡한 구성 요소를 더 쉽게 이해할 수 있도록

클래스 구성 요소에서는 동일한 비즈니스 논리에 대한 코드가 구성 요소의 다양한 수명 주기 기능에 분산되어 있으며 Hooks는 동일한 비즈니스 논리에 대한 코드를 함께 집계할 수 있습니다. 비즈니스 로직이 명확하게 분리되어 있어 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.

【관련 추천: Redis 동영상 튜토리얼】

위 내용은 반응에 후크를 사용하면 어떤 이점이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!