Question

在获得这样的功能

之后，我仍然是新的反应/ redux

user.js的

class User extends React.Component {
    componentWillMount() {
        this.props.fetchUser(.....);
}

render() {
    return (
        <Profile />
    )
}

export default connect(null, {fetchUser})(User);

Profile.js

class Profile extends React.Component {
    render() {

        const { user } = this.props

        return (    
                <h1>{user.profile.name}</h1>
        )
}

const mapStateToProps = state => ({
    user: state.store.user
});

export default connect(mapStateToProps, {})(Profile)

actions.js

export const fetchUser = (.....) => dispatch => {
    fetch()
    .....
}

reducers.js

case FETCH_USER:
    return {
        ...state,
        user: action.payload.user
    };

据我所知，User组件从componentWillMount（）上的connect调用一个action（fetchUser）。该操作调用api，获取数据，reducer将其添加到状态中的商店。然后，Profile组件可以使用connect来映射商店中fetchUser的数据并显示该数据。

阅读一些教程，包括https://github.com/reactjs/redux/blob/master/docs/basics/UsageWithReact.md

看起来在不使用类的情况下可以简化一些事情。

如果我要将用户和配置文件组件更改为更实用的方式，我该怎么做？

例如

const User = () => {
    return (
        <Profile />
    )
}

如何调度fetchUser操作以及如何模拟它以使用componentWillMount（）的流程调用？

或者我只是过于复杂化了？

Answer 1

还有一种方法可以支持功能组件中的生命周期方法。 https://www.npmjs.com/package/react-pure-lifecycle

import React from 'react';
import lifecycle from 'react-pure-lifecycle';

 // create your lifecycle methods
const componentDidMount = (props) => {
   console.log('I mounted! Here are my props: ', props);
};

// make them properties on a standard object
const methods = {
  componentDidMount
};

const FunctionalComponent = ({children}) => {
return (
  <div>
    {children}
  </div>
 );
};

// decorate the component
export default lifecycle(methods)(FunctionalComponent);

Answer 2

我认为，User组件设计得很好。它将作为Profile的容器来提供数据。

不应该使Profile组件类面向，而应该是Stateless。

让User组件传递Profile组件所需的数据。您不需要使用Profile连接redux-connect组件。只需将其呈现为Child component of User。

配置文件

const Profile = (props) => { const {user, likeProfile} = props; //likeProfile()//call like this using dom event or programmatically. return ( <h1>{user.profile.name}</h1> ) }

您需要在User组件中进行一些更改。通过Profile获取mapStateToProps组件的状态。

class User extends React.Component { componentWillMount() { this.props.fetchUser(.....); } render() { const {user, likeProfile} = this.props; return ( <Profile user= {user} likeProfile={likeProfile} /> //passed the user data to Profile component vua User ) }

在Profile connect中映射User的用户状态。

const mapStateToProps = (state)=>{ return{ user : state.somereducerkey.user //this will be accessible in Profile via props { user} } } export default connect(mapStateToProps, {fetchUser, likeProfile})(User);

Answer 3

我认为你应该继续使用带有redux的statefull组件...... https://medium.com/@antonkorzunov/2-things-about-purecomponent-you-probable-should-know-b04844a90d4

Redux connect - 是一个PureComponent。是的 - 非常重要的是，分子的HoC是纯粹的。甚至可以在其他纯组件中使用。并从当前环境中获取商店。

同样适用于样式化组件 - 您可以使用PureComponent进行包装，但它仍会对主题更改做出反应。

解决方案很简单 - 绕过逻辑，使用旧学校事件总线，订阅，等待和发出事件。

样式化-成品的配件：

componentWillMount() {      
// subscribe to the event emitter. This      
// is necessary due to pure components blocking 
// context updates, this circumvents      
// that by updating when an event is emitted.

   const subscribe = this.context[CHANNEL];
   this.unsubscribe = subscribe(nextTheme => {  <----- MAGIC
React-redux:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = 
     this.store.subscribe(this.handleChange);  <----- MAGIC
 }
}
componentDidMount() {
  this.trySubscribe();
}

因此，即使父Pure Component阻止任何更新，您也可以捕获更改，存储更新，上下文变量或其他所有内容。

所以 - 纯组件内部的东西非常脏，绝对不纯净。它是由副作用驱动的！但这绕过了直接的逻辑流程，并且与其他应用程序的工作方式完全不同。

所以 - 小心点。不要忘记魔术。

... Aaaand。这就是一个原因，为什么任何redux存储更新都会导致每个连接组件重绘，以及为什么你应该使用重新选择来连接HoC -

停止不必要的变更传播。但你应该从另一个角度来看这个：

redux-connect是变更传播的来源。 redux connect是变更传播的结束。它仍然是PureComponent。这导致了非常方便的事情 - 您可以仅使用redux-connect控制更改传播。只需为变化创建边界。让我们在另一篇文章中讨论这个问题。

结论纯组件可确保您的应用快速运行有时 - 只要它们改变了应用程序的工作方式，就会更容易预测，但往往更不可预测。

无状态组件不是纯粹的，并且可能比任何类型的PureComponents都慢。

但是......如果您希望创建具有良好用户体验的快速应用程序 - 您必须使用Pure Component。

别无选择。但是，现在 - 你知道隐藏的真相，并且知道一些魔法......

Answer 4

React建议在componentDidMount()而不是componentWillMount()中提出ajax请求。有关详细信息，请阅读this post。
由于您想在componentDidMount()中发出ajax请求，因此您需要一个类。编写组件定义有两种方法：功能组件和类组件。功能组件更简洁，但您不会获得像componentDidMount()这样的组件生命周期方法。可以把它想象成一个渲染函数，它将props作为输入和输出DOM s（在JSX中）。要覆盖这些生命周期方法，您需要将它们定义为类。
如果您想使用Redux，并希望在Redux操作中发出ajax请求，则应该import动作创建器功能（在您的情况下为fetchUser(..)）发出ajax请求，并在dispatch(fetchUser(..))中发出componentDidMount()。 connect(..)已将dispatch(..)个组件Redux store传递给actions。

如果您想了解它在其他redux应用中的完成情况，请参阅redux.js repo中的官方示例应用，注意containers和String[] states = readFile("States.txt"); System.out.println(String.join(" ", states)); System.out.println(states.length); Arrays.sort(states); System.out.println(String.join(" ", states)); System.out.println(states.length);：{{3 }}

Answer 5

在您的情况下，您可以继续使用 statefull组件 ，如果你需要采用功能方式

有一项工作

https://github.com/mobxjs/mobx/issues/162

<强>建议

在componentDidMount中调用api会有意义 componentWillMount，因为你可以向用户显示一些东西取。

使用redux

5 个答案: