有人可以请解释React中的高阶组件。我已阅读并重新阅读文档,但似乎无法获得更好的理解。根据文档,HOC通过向该函数传递参数来创建返回反应组件的主函数来帮助消除重复。 我有几个问题。了解React高阶组件
- 如果HOC创建一个新的增强组件,是否可以不传入任何组件作为参数?
- 在一个例子中,例如this,它是高阶元件,
Button
或EnhancedButton
。 我试图创造一个HOC这样的:
// createSetup.js import React from 'react'; export default function createSetup(options) { return class extends React.Component { constructor(props) { super(props); this.state = {}; this.testFunction = this.testFunction.bind(this); } testFunction() { console.log("This is a test function"); } render() { return <p>{options.name}</p> } } } // main.js import React from 'react'; import {render} from 'react-dom'; import createSetup from './createSetup'; render((<div>{() => createSetup({name: 'name'})}</div>), document.getElementById('root'););
运行此不显示特定的,只有div
谁能帮助了一个更好的例子比那些给定的?
为什么组件会多次触发它们的'componentWillMount'方法多次 – cr05s19xx
@ cr05s19xx因为它们已被卸载并且它们正在重新挂载......或者因为您正在挂载一个新实例。 – Josep
查看[React的组件生命周期](https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle)。 – Josep