无状态组件 prop 函数在渲染时如何运行？答案

【问题标题】：How can a stateless component prop function run when it renders?无状态组件 prop 函数在渲染时如何运行？
【发布时间】：2017-07-21 22:49:44
【问题描述】：

我有一个很长的项目列表，当它们呈现时，我希望滚动移动到列表的底部——但仅在它们呈现时。有谁知道如何使用无状态组件来做到这一点？我想要一个函数作为组件上的道具运行，并且我希望这个函数传递元素，以便在我的带有 Redux API 的容器组件中滚动到元素。但是，我只希望函数在组件呈现时运行，并且我正在努力让组件上的函数在组件呈现时运行，并将自身作为参数传递。

我熟悉类组件中关于组件生命周期的这些事件：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
渲染()

但是这些生命周期事件在无状态组件中对我不可用。

【问题讨论】：

无状态函数组件没有生命周期。
所以你有一个容器组件和单独的项目组件？ item 组件是否有 scrollTo 方法或者你的意思是什么？
@dejakob 假设我有一个 Comments 容器和一个 Comments 组件。 Comments 组件从其 Comments 容器接收 cmets 集合，并且对于每个评论调用 Comment 容器，该容器调用评论组件，并从 Redux 传递了评论组件所需的状态。当 cmets 列表完成渲染后，我希望 UI 滚动到列表底部。

标签： reactjs redux react-redux

【解决方案1】：

无状态函数组件没有生命周期，因为这很荒谬。 React 生命周期本质上是有状态的。

你有几个选择：

将您的无状态函数组件转换为类组件以利用生命周期方法。
将您的无状态功能组件包装在一个提供您需要的生命周期管理的高阶组件中。看看recompose 和它提供的lifecycle 高阶组件。

【讨论】：

【解决方案2】：

根据您最后的评论，您可以像这样解决您的用例： https://jsfiddle.net/69z2wepo/83446/

在列表组件中，你在componentWillMount中添加这个：

componentWillReceiveProps(newProps) {
    if (!this.props.comments.length && newProps.comments.length) {

      // Using setTimeout 0 will cause the function to be triggered after the re-render
      setTimeout(() => {

        // this.list being a ref on the list component 
        const { height } = this.list.getBoundingClientRect();
        document.body.scrollTop = height;
      }, 0);
    }
  }

在这种情况下，评论组件可以是无状态的

function Comment(props) {
  return (
    <li>{props.comment.content}</li>
  );
}

【讨论】：