无状态组件prop函数在呈现时如何运行？

Question

I have a long list of items and when they render, I want the scroll to move to the bottom of the list -- but only when they render. Does anyone know how to do this with a stateless component? I would like a function to run as a prop on the component and I want this function to pass the element so that in my container component with the Redux API I can scroll to the element. However, I only want the function to run when the component renders, and I am struggling to get a function on a component to run when it renders with itself passed as an argument.

I am familiar with these events in a class component regarding the lifecycle of a component:

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• componentDidUpdate()
• render()

But these lifecycle events are not available to me in a stateless component.

Answer 1

Stateless function components do not have a lifecycle as that would be nonsensical. The React lifecycle is inherently stateful.

You've got a few options:

1. Convert your stateless function components to class components to make use of the lifecycle methods.
2. Wrap your stateless function components in a higher order component that provides the lifecycle management you need. Take a look at recompose and the lifecycle higher order component it provides.

Answer 2

Based on your last comment, you could solve your use case like this: https://jsfiddle.net/69z2wepo/83446/

In the list component, you add this in the 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);
    }
  }

In this case the Comment component can be stateless

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