reactjs - React.cloneElement 与渲染 Prop 模式

Question

我正在学习 React 并试图找出动态添加 props 的最佳方法。我知道两种方法可以做到这一点，但不知道哪一种更好更快。

第一种方法是使用 React.cloneElement api

const Parent = ({ children }) => {
  const child = React.cloneElement(children, { newProp: 'some new prop' });

  return child;
};

const Child = ({ newProp }) => <div>{newProp}</div>;

const App = () => (
  <Parent>
    <Child />
  </Parent>
);

第二种方法是使用“渲染 Prop ”模式，React 官方网站上有描述:Render Props

const Parent = ({ render }) => {
  const newProp = 'some new prop';

  return render(newProp);
}

const Child = ({ newProp }) => <div>{newProp}</div>;

const App = () => (
  <Parent render={props => <Child newProp={props} />} />
);

两种方法给出相同的结果，但我不知道幕后发生了什么以及使用哪种方法。

Answer 1

React.cloneElement 是一个帮助器，通常用于传递 inline-props 以避免污染代码。而不是像这样传递一个 prop:

return <Child propA={myProps.propA} propB={myProps.propB} />

你可以这样做:

return React.cloneElement(Child, {...myProps})

这几乎与:

 return <Child {...myProps} />

这里唯一的区别是 cloneElement 将保留先前附加的refs。

现在，renderProps 是一种重用状态逻辑的技术，并且具有与 cloneElement 不同的应用。第一个将帮助您进行 props 操作，第二个相当于 高阶组件，并且在您想要重用某些逻辑以动态地将 props 注入(inject)到您的子组件中时使用:

class Animation extends Component{
   state = {} 
   componentDidMount(){/*...*/}
   componentDidUpdate(){/*...*/}

   render(){
       const { customProps } = this.state
       const { children } = this.props

       return children(customProps)
   }
}