React Functional 컴포넌트: 함수와 컴포넌트로 호출

React Functional 컴포넌트: 함수와 컴포넌트로 호출

기능하는 컴포넌트가 있다고 합시다.

const Foo = (props) => ( <div>{props.name}</div> );

함수로서 직접 호출하는 것과 다른 점은 무엇입니까?

const fooParent = () => (
    <div> {Foo({ name: "foo" })} </div>
)

컴포넌트라고 부르는 것과 비교해서:

const fooParent = () => (
    <div> <Foo name="foo"/> </div>
)

성능의 영향, 내부적으로는 React가 어떻게 다른지, 기능적인 컴포넌트가 성능을 향상시켰다고 하는 React Fiber가 어떻게 다른지 등에 관심이 많습니다.

함수라고 부르는 것이 훨씬 빠릅니다. 사실, 몇 달 전에 정확히 이것에 대한 이야기가 있었습니다.현시점에서는 기능성 반응 컴포넌트는 Pure Components일 수 없기 때문에 추가 최적화가 실제로 적용되지 않습니다.

기본적으로 기능 컴포넌트를 전체 반응 라이프 사이클을 제거하는 함수로 호출할 수 있는지 여부입니다.생각해보면 지금도 렌더링 방식에서 이 기술을 사용하고 있을 것입니다.다음 사항을 고려하십시오.

... some component ... 

render() {

  const tabHeaders =<TabHeaders>{this.props.tabs.map(this.renderTabHeader)}</TabHeader>;
  const tabContents = <TabContents>{this.props.tabs.map(this.renderTabContent)}</TabContents>;

  return (<div>
    {this.props.tabsBelow?[tabContents, tabHeaders] : [tabHeaders, tabContents]}
  </div>);
} 

renderTabHeader 메서드는 일부 리액트컴포넌트를 반환하고 기능 컴포넌트일 수도 있지만 이 경우 컴포넌트 클래스의 메서드에 불과합니다.

상세한 것에 대하여는, 다음의 문서를 참조해 주세요.https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

이 babel 플러그인도 확인해 주세요.https://babeljs.io/docs/plugins/transform-react-inline-elements

기능 컴포넌트를 직접 호출하는 경우 실제로는 커스텀훅을 호출하는 것입니다.

예:

function A() {
  const [state] = useState([])
  return (
    <div>{state}</div>
  )
}

A()
<A />

전화하시면A(),그state상위 파이버에 마운트되지만<A />, 리액트가 호출합니다.createElement새로운 광섬유를 제작하여state.

그래서 실제로 기능 호출보다는 구성 요소로 렌더링하는 것이 유용한 사용 사례를 접하게 되었습니다.React 16을 사용하면 오류 경계 기능을 사용할 수 있습니다.이를 통해 컴포넌트 내에 오류가 발생했을 때 폴백 오류 UI를 렌더링할 수 있습니다.함수 호출 변동에서 예외가 발생해도 트리거되지 않습니다.componentDidCatch자 컴포넌트 내에 삽입해야 합니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: false
    };
  }

  componentDidCatch() {
    this.setState({ error: true});
  }

  render() {
    return this.state.error
      ? "Error :("
      : this.props.children;
  }
}

const renderContent = () => {
  throw new Error();
}

const Content = () => {
  throw new Error();
}

// This will throw exception and not trigger error state
const Foo = () => (
  <ErrorBoundary>
    <div>{renderContent()}</div>
  </ErrorBoundary>
);

// This will trigger the error state
const Bar = () => (
  <ErrorBoundary>
    <div><Content /></div>
  </ErrorBoundary>
);

물론 오류 경계는 더 높을 수 있지만, 특정 사용 사례를 하나만 지적하면 다른 하나를 선택할 수 있습니다.

또한 이름을 붙이기 위해 컴포넌트로 렌더링하는 것도 좋습니다.React dev 도구에 이름이 표시되고 효소 테스트를 수행할 때 이름을 선택기로 사용할 수도 있습니다.

됩니다.React.createElement()편,,,함함함직직다다다다다다다따라서 함수를 직접 호출하는 것이 더 빠른 이유를 알 수 있습니다.

단, 함수를 직접 호출하는 경우 @dmwong2268에 의해 도입된 문제 또는 이와 같은 문제가 발생할 수 있습니다.

언급URL : https://stackoverflow.com/questions/46965309/react-functional-component-calling-as-function-vs-as-component