小编Jam*_*den的帖子

这就是我们使用的方式 componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  if(nextProps.myProp !== this.props.myProps) {
    // nextProps.myProp has a different value than our current prop
  }
}

它非常相似 componentDidUpdate

componentDidUpdate(prevProps) {
  if(prevProps.myProps !== this.props.myProp) {
    // this.props.myProp has a different value
    // ...
  }
}

我可以看到一些差异,比如我在componentDidUpdate中执行setState,render会触发两次,componentWillReceiveProps的参数是nextProps,而参数for componentDidUpdate是prevProp,但严重的是我不知道何时使用它们.我经常使用componentDidUpdate,但使用prevState,比如更改下拉状态并调用api

例如.

componentDidUpdate(prevProps, prevState) {
      if(prevState.seleted !== this.state.seleted) {
        this.setState({ selected: something}, ()=> callAPI())
      }
    }

要求：

如果用户申请了一个职位，则将apply_job标志传递给后端，然后将用户带到职位页面，如果apply_job标志为true，则阻止用户访问其他页面。即使用户刷新页面，如果 Applied_job 标志为 true，仍然会将用户重定向到作业页面。

问题是我使用高阶函数或高阶组件来进行路由保护，我不知道如何调用 api 来获取标志。

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => {
            return (
                true //assume this flag is from server, how to do an api call here??
          ? <Redirect to='/jobs' {...props} />
                    : <Component {...props} />
            )
    }} />
)

https://codesandbox.io/s/6rrlz3xpz

如果我在外面打电话，应该去哪里打电话？我可以将标志存储在本地存储中，但如果是这样，用户可以从客户端删除它，这也是不对的。

我对于反应16的新生命周期,getDerivedStateFromProps用例感到困惑.以下面的代码为例,完全不需要getDerivedStateFromProps,因为我可以通过componentDidUpdate实现我想要的.

export class ComponentName extends Component {
  //what is this for?
  static getDerivedStateFromProps(nextProps, prevState) {

    if (nextProps.filtered !== prevState.filtered && nextProps.filtered === 'updated') {
      return {
        updated: true //set state updated to true, can't do anything more?
      };
    }

    return null;

  }

  componentDidUpdate(prevProps, prevState) {
    if(prevProps.filtered !== this.state.filtered && this.state.filtered === 'updated'){
      console.log('do something like fetch api call, redirect, etc..')
    }
  }

  render() {
    return (
      <div></div>
    );
  }
}

const response = await Promise.all([//Promise object one], [//Promise object two])

响应是一个对象数组,如果我想要对象的响应,我必须做响应[0],我们可以给响应一个名字吗？如果我有4个项目我必须做响应[3]以获得最后一个不优雅的响应.

说我想在npm包中共享一个简单的react组件，让其他人使用它，我必须这样做吗？

import SomeComponent from './components/SomeComponent';

module.exports = {
  SomeComponent: SomeComponent
}

参考 https://github.com/alanbsmith/npm-example-module/blob/master/lib/index.js

在项目的package.json中，您可以看到软件包的主文件是build / index.js，但是为什么作者不只是export components/SomeComponent而是创建了包装器？我了解他使用babel，这是为了支持旧版浏览器的代码，但是为什么要在这种情况下使用module.exports？