Question

假设出现以下情况：作为登录用户，您正在访问自己的个人资料页面。标题菜单将显示您作为登录用户的头像，页面的其余部分将显示您的用户公共信息。

您从api中获得了一个用户列表，您需要处理其中两个用户的数据：登录用户和正在访问哪个个人资料页面的用户（在上述情况下，实际上是同一用户）。在<ul class="linkList"> <li><a href="#" target="_blank" class="pdfLink">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="#" target="_blank" class="wordLink">bcbbbbbbbbbb</a></li> <li><a href="#" target="_blank" class="excelLink">cccccccccccccc</a></li> <li><a href="#" target="_blank" class="pdfLink">dddddddddddđ</a></li> <li class="new"><a href="#" target="_blank" class="pdfLink">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</a></li> <li class="txt-note text-indent comments-mark">ffffffffffffffffffffffff</li> </ul>，store.users和store.currentUser中复制数据将是一个非常糟糕的主意（需要在每次修改数据时同步这3次出现的数据）。但是我不希望每次在用户列表中修改某些lambda用户数据时都重新呈现使用当前或已登录用户数据的组件。

您将如何进行操作以避免数据重复，加快数据处理时间（避免进行诸如过滤/查找之类的昂贵列表操作）以及避免不必要的重新渲染？

经过一番思考，我正在考虑以这种方式实施它，数据存储如下：

store.myUser

现在，可以按以下方式连接UserDetails组件：

store = {
  users: {
    1: {
      name: 'John',
    },
  },
  currentUser: 1,  // user which profile page is being accessed
  myUser: 1,       // logged in user
};

和使用已登录用户数据的页面标题可以按以下方式连接：

@connect(state => {user: state[state.currentUser]})
export default class UserDetails extends Component {
  render() {
    return <div>User profile: {this.props.user.name}</div>;
  }
}

但是我不认为这是理想的解决方案。将必须测试是否真的避免了重新渲染。欢迎您的想法！

Answer 1

我会将登录用户的详细信息存储在Redux存储中。管理用户会话和呈现持久标头所需的任何数据。对于其他用户配置文件，我将从后端动态加载数据。

例如，如果您有一条路线/profile/:id，而这是URL foo.com/profile/99

class Profile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null,
            loading: true
        };
    }
    componentDidMount() {
        api.get('/getUser', {userId: this.props.match.params.id}, response => {
            this.setState({
                user: response.user,
                loading: false
            });
        });
    }
    render() {
        return (
            ...
        );
    }
}

Redux＆React以正确的方式处理数据

1 个答案: