直接调用功能组件 [英] Direct call of a functional component

问题描述

无状态功能组件只是一个接收 props 并返回React元素的函数：

Stateless functional component is just a function that receives props and returns React element:

const Foo = props => <Bar />;

这样< Foo {... props} /> <父组件中的/ code>（即 React.createElement（Foo，props））可以省略，而不是调用 Foo 直接， Foo（道具），所以 React.createElement 可以消除微小的开销，但这不是是必要的。

This way <Foo {...props} /> (i.e. React.createElement(Foo, props)) in parent component could be omitted in favour of calling Foo directly, Foo(props), so React.createElement tiny overhead could be eliminated, yet this isn't necessary.

使用 props 参数直接调用功能组件是不好的做法，为什么？这样做有什么可能的影响？这会以负面的方式影响性能吗？

Is it considered a bad practice to call functional components directly with props argument, and why? What are possible implications of doing this? Can this affect the performance in negative way?

我的具体情况是有一些组件是DOM元素的浅包装，因为这被认为是一个好主意由第三方：

My specific case is that there's some component that is shallow wrapper over DOM element because this was considered a good idea by a third party:

function ThirdPartyThemedInput({style, ...props}) {
  return <input style={{color: 'red', ...style}} {...props} />;
}

这是演示显示了这种情况。

这是一种被广泛接受的做法，但问题在于它是不可能的从无状态函数获取 ref 包装的DOM元素，因此该组件使用 React.forwardRef ：

This is widely accepted practice but the problem with it is that it's impossible to get ref of wrapped DOM element from stateless function, so the component uses React.forwardRef:

function withRef(SFC) {
  return React.forwardRef((props, ref) => SFC({ref, ...props}));
  // this won't work
  // React.forwardRef((props, ref) => <SFC ref={ref} {...props } />);
}

const ThemedInput = withRef(ThirdPartyThemedInput);

这种方式可以用作：

<ThemedInput ref={inputRef} />
...
inputRef.current.focus();

我知道的明显缺点是 withRef 要求开发人员了解包装组件的实现，这不是HOC的常规要求。

The obvious downside I'm aware of is that withRef requires a developer to be aware of wrapped component implementation, which isn't a usual requirement for HOCs.

是它在上述情况下被认为是一种正确的方法吗？

推荐答案

我认为没有任何问题直接调用无状态功能组件。正如你所说，它甚至消除了一个微小的开销。至于可能的含义，可以大胆地说，没有任何影响，将来不会有任何影响，因为这是一种非常罕见的使用SFC的方式。但是所有结果都指出不应该有任何影响（它只是一个函数调用更少）。

I don't think there's anything wrong with calling Stateless Functional Component directly. As you said it's even one tiny overhead eliminated. As to the possible implications, it would be bold to say that there are none implications and there will be none implications in the future because this is a really rare way of using SFC's. But everything points to conclusion that there shouldn't be any implications (it's just one function call less).

无论如何，下面我想提出另一种做法这使用 findDOMNode 而不是refs：

Anyway, below I'd like to present another way of doing this using findDOMNode instead of refs:

我创建了焦点组件非常方便使用，但需要先进行初始化（因为我们需要一种方法来触发聚焦在道具之外，因为组件可能会被相同的道具重新渲染）：

I've created Focus component that is really convenient to use but needs to be initialized first (since we need a way to trigger focus outside props since a component may be rerendered with the same props):

// focus.js
import React from "react";
import { findDOMNode } from "react-dom";

export default function createFocus() {
  class Focus extends React.Component {
    componentDidMount() {
      Focus.now = () => {
        findDOMNode(this).focus();
      }
    }
    render() {
      return this.props.children;
    }
  }

  return Focus;
}

// index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import createFocus from './focus';

const Focus = createFocus();

import { ThirdPartyThemedInput } from './third-party-lib';

function App() {
  return (
    <div>
      <button onClick={() => Focus.now()}>Proceed with form</button>
      <Focus>
        <ThirdPartyThemedInput placeholder="Fill me" />
      </Focus>
    </div>
  );
}

render(<App />, document.getElementById('root'));

住在： https://stackblitz.com/edit/react-bpqicw

这篇关于直接调用功能组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！