javascript - 直接调用功能组件

Question

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

const Foo = props => <Bar />;

这边<Foo {...props} /> (即 React.createElement(Foo, props) )在父组件中可以省略以支持调用 Foo直接，Foo(props) , 所以 React.createElement可以消除微小的开销，但这不是必需的。

用 props 直接调用功能组件是否被认为是一种不好的做法？争论，为什么？这样做可能意味着什么？这会对性能产生负面影响吗？

我的具体情况是，有一些组件对 DOM 元素进行了浅层包装，因为第三方认为这是一个好主意:

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

这是一个 demo这表明了这种情况。

这是被广泛接受的做法，但问题是它不可能得到 ref来自无状态函数的包装 DOM 元素，因此该组件使用 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 的通常要求。

在上述情况下，它是否被认为是正确的方法？

Answer 1

我觉得直接调用Stateless Functional Component 没什么问题。正如您所说，它甚至消除了一点点开销。至于可能的影响，可以大胆地说没有影响，将来也不会有影响，因为这是一种非常罕见的使用证监会的方式。但一切都指向结论，不应有任何影响(这只是一个函数调用较少)。

无论如何，下面我想介绍另一种使用 findDOMNode 而不是 refs 的方法:

我创建了 Focus 组件，它使用起来非常方便，但需要先初始化(因为我们需要一种方法来触发 props 之外的焦点，因为组件可能会使用相同的 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