Question

我是新手做出反应，我正在尝试实现/学习无状态组件，我很难使用组件将安装在无状态组件中。

我的代码

const Terms = (actions, commonReducer) => {
componentDidMount() {
    actions.userActions()
}

return (
    <div className="jobUpdate">

        <form onSubmit={(e) => {
            e.preventDefault(); actions.userInput(document.getElementById('enteredVal').value)
        }}>
            <input type="text" id="enteredVal" />
            <button type="submit"></button>
        </form>


    </div>
);

};

我知道无状态组件没有生命周期钩子，但是想要预制件组件的替代方法确实安装在无状态组件中。

非常感谢任何帮助。提前致谢

Answer 1

使用HOC（高阶组件）投掷愚蠢的工作

const withLifecycles = (MyStatelessComp) => class extends React.PureComponent {
   static propTypes = {}
   static displayName = "withPure(xxx)"
   state = {}
   componentDidMount() {}
   render() {
      return <MyStatelessComp {..this.state, ...this.props} />
   }
}

然后将其用作

MyStatelessWithLifecycles = withLifecycles(props => {    
  ...    
  return <Bla /> 
}

虽然不确定无状态组件在那里拥有生命周期的原因是什么，但它的意思是纯粹而简单（仅限演示文稿）。

Answer 2

您始终可以使用称为高阶组件的模式将组件包装到另一个组件中。

higher-order component (HOC)是一个获取组件并返回新组件的函数。

这项技术最广泛使用的例子可能是react-redux，它使用connect（）方法创建连接到redux商店的组件。

除了创建自己的HOC之外，还有一些库可以为您完成，例如react-redux-lifecycle。

但是，您尝试使用此组件并不是一种非常常见的模式 - 更常见的是将业务和数据的处理保留在容器中组件，并保留表示组件以继承来自道具的商店操作和数据。查看Dan Abramov的Presentational and Container Components，了解如何以及为何将组件分解为这两个类别！

Answer 3

从React 16.8开始，您可以使用useEffect挂钩来完成相同的功能。

在您的特定示例中，我们将具有以下内容：

import React, { useEffect } from 'react';

// other imports and declarations

function Example() {
  // Similar to componentDidMount 
  useEffect(() => {
    // This function will be run on component mount
    myAction();
  }, []); // The second argument of [] tells react to only perform the effect on mount

  return (
    <div>
      ... your component
    </div>
  );
}

export default Example;

docs在解释这一方面做得很好，我鼓励您继续阅读。请记住，幕后发生的事情并不完全相同，因此模式将不是一对一的对应关系。但是这些模式应该可以帮助您解决大多数情况。

只需了解以下基本概念：

useEffect挂钩的第一个参数是“副作用”函数。它总是在第一个组件渲染之后运行，然后有条件地运行。
此“副作用”功能可以返回“清理”功能。 “清除”功能将在下次运行“副作用”功能之前运行。它将始终在卸载组件之前运行。
useEffect挂钩的第二个可选参数是一组依赖项。
如果依赖项中的任何值发生更改，则“副作用”功能将在下一次渲染后运行。

无论如何，这是一些模拟类组件行为的模式。

componentDidMount + componentDidUpdate

useEffect(() => {
  console.log("This line will be run after each render ");
});

componentDidUpdate，当给定值更改时

// get myValue from component props
const { myValue } = props;

useEffect(() => {
  console.log("This line will be run after each render where myValue changed");
}, [myValue]);

给定值更改时

componentDidUpdate，pt。 2

// get myValue from component props
const { myValue } = props;

const myCondition = myValue === "yes";
useEffect(() => {
  console.log('This line will be run after each render where the returned value of the statement `myValue ===  "yes"` changes from false to true or true to false ');
}, [myCondition]);

给定值更改时

componentDidUpdate，pt。 3

// get myValue from component props
const { myValue, myValue2 } = props;

useEffect(() => {
  console.log("This line will be run after each render where myValue OR myValue2 changed");
  
}, [myValue, myValue2]);

componentDidMount

useEffect(() => {
  console.log("This line will be run only after the first render ");
}, []);

componentWillUnmount

useEffect(() => {
  // nothing will be run as a side effect...
  return () => {
    // but this will be run as clean up
    console.log("This line will be run just before the component unmounts");
  };
}, []);

componentDidUpdate（无componentDidMount）

import React, {useEffect, useRef} from 'react';

export default function MyComponent() {

  // create a reference value which does not trigger a re-render when changed
  const isMounted = useRef(false);
  useEffect(() => {
    if( isMounted.current === false ){
      // on mount, set the ref to true
      isMounted.current = true;
    } else {
      // the component is already mounted
      console.log("This line will be run after each render except the first ");  
    }
  }); 

  return (<div />);
}

希望这对某人有用。

组件的实现确实安装在无状态组件

3 个答案: