React 无状态功能组件和组件生命周期

Question

所以我只是在 React 和 Redux 中使用 无状态功能组件 和我对组件生命周期很好奇。最初我有这个：

// actions.js

export function fetchUser() {
    return {
        type: 'FETCH_USER_FULFILLED',
        payload: {
            name: 'username',
            career: 'Programmer'
        }
    }
}

然后在组件中我使用 componentDidMount 来获取数据，如下所示：

// component.js

...
componentDidMount() {
  this.props.fetchUser()
}
...

切换到无状态功能组件后，我现在有一个容器：

// statelessComponentContainer.js

...
const mapStateToProps = state => {
  return {
    user: fetchUser().payload
  }
}
...

如您所见，目前我没有异步获取任何数据。所以我的问题是，当我开始异步获取数据时，这种方法会导致问题吗？还有更好的方法吗？

我查看了这个 blog，他们说 如果您的组件需要生命周期方法，请使用 ES6 类。如有任何帮助，我们将不胜感激。

Answer 1

如果还没有数据，请不要渲染任何视图。这是你如何做到这一点。

解决您的问题的方法是 return 来自 this.props.fetchUser() 的 promise。您需要 dispatch 您的操作使用 react-thunk （查看示例和信息如何设置。很简单！）.

您的 fetchUser 操作应如下所示：

export function fetchUser() {
  return (dispatch, getState) => {
      return new Promise(resolve => {
          resolve(dispatch({         
          type: 'FETCH_USER_FULFILLED',
          payload: {
            name: 'username',
            career: 'Programmer'
          }
        }))
      });
  };
}

然后在您的Component生命周期方法componentWillMount()中添加以下代码：

componentDidMount() {
  this.props.fetchUser()
    .then(() => {
      this.setState({ isLoading: false });
    })
}

当然，您的 class constructor 应该将初始状态 isLoading 设置为 true。

constructor(props) {
  super(props);

  // ...

  this.state({
    isLoading: true
  })
}

最后在您的 render() 方法中添加一个条件。如果您的请求尚未完成并且我们没有数据，请打印 'data is still loading...' 否则显示 <UserProfile /> 组件。

render() {
  const { isLoading } = this.state;

  return (
    <div>{ !isLoading ? <UserProfile /> : 'data is still loading...' }</div>
  )
}

Answer 2

首先，不要做你在 mapStateToProps 中想做的事情。 Redux 遵循 unidirectional data flow 模式，其中组件调度操作更新状态，更改组件。您不应该期望您的操作 return 数据，而是期望商店使用新数据更新。

采用这种方法，尤其是当您异步获取数据时，意味着您将不得不适应数据尚未加载的状态。那里有很多问题和教程（甚至在这个问题的另一个答案中），所以我不会担心在这里为你举一个例子。

其次，想要在组件挂载时异步获取数据是一个常见的用例。想要编写漂亮的功能组件是一种普遍的愿望。幸运的是，我有一个库可以让您同时执行这两项操作：react-redux-lifecycle。

现在你可以写：

import { onComponentDidMount } from 'react-redux-lifecycle'
import { fetchUser } from './actions'

const User = ({ user }) => {
   return // ...
}

cont mapStateToProps = (state) => ({
  user = state.user
})

export default connect(mapStateToProps)(onComponentDidMount(fetchUser)(User))

我已经对您的组件名称和存储结构做出了一些假设，但我希望这足以让您明白我的想法。我很乐意为您澄清任何事情。

免责声明：我是react-redux-lifecycle库的作者。

React 无状态功能组件和组件生命周期

React stateless functional components and component lifecycle

javascript

reactjs

redux

react-redux

es6-class