Question

我正在做一个React Native项目，尽管我从未使用过React或任何Web或移动开发，但我的经理还是希望我能有所作为。在大多数情况下，它很有趣，并且我能够进行所需的大部分更改，但是，如果有人可以让我更清楚一点，我将努力理解代码的某些部分。我的背景是Java。

在这里我假设handleChange接受一个对象“ updates”而不是状态，但是我对“ changes：{”和那三个点... state.changes，... updates

感到困惑。

handleChange = (updates) => {
    this.setState((state) => ({
      changes: {
        ...state.changes,
        ...updates,
      },
    }))
  }

这里我假设mergedUser正在将两个对象“ this.props”和“ this.state”解包到变量中漩涡状括号，然后返回... userProfile，...更改，再次不确定要使用的点是什么而且似乎lile userProfile位于screenProps内部的homeStore内部吗？

get mergedUser() {
    const {screenProps: {homeStore: {userProfile}}} = this.props
    const {changes} = this.state

    return {
      ...userProfile,
      ...changes,
    }
  }

在这里看起来很简单，设置参数TimerId，然后b尝试访问TimerId。但是为什么会有“ routes [0] .routes [0] .routes [0]”为什么不仅this.props.navigation.state.TimerId

  a) this.props.navigation.setParams({TimerId})
  b) this.props.navigation.state.routes[0].routes[0].routes[0].TimerId

最后一个我不知道发生了什么

export default class LogIn extends Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    screenProps: PropTypes.object.isRequired,
  }
  state = {
    email: '',
  }

Answer 1

handleChange = (updates) => {
    this.setState((state) => ({
      changes: {
        ...state.changes,
        ...updates,
      },
    }))
  }

这是此代码的作用：您有一个handleChange函数，该函数将updates作为对象。然后，使用当前状态调用setState（）函数。 changes是状态对象中的键值，它看起来像是保存所有信息。在更改中，您使用扩展运算符...（三个点）扩展了changes对象中的所有值，然后扩展了updates中的所有值以替换它们。因为如果您的原始状态具有键/值对，并且如果您在不传递每个键/对的情况下更新了状态（即使您没有更改它们），也会将其从您的状态中删除。

get mergedUser() {
    const {screenProps: {homeStore: {userProfile}}} = this.props
    const {changes} = this.state

    return {
      ...userProfile,
      ...changes,
    }
  }

在此代码中，您正在破坏this.props和this.state对象。在Javascript ES2016中，如果您不希望将它们与一起使用，则可以对其进行分解。（点）运算符一直都在。假设您有一个人物对象：

let person = {name: 'Sam', age: 36};

您可以使用以下方法对其进行破坏：

let {name, age} = person;
console.log(name, age);

代替这种方式：

console.log(person.name, person.age);

我不知道您的第三个问题，但这可能是因为您的项目正在使用路由器。

export default class LogIn extends Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    screenProps: PropTypes.object.isRequired,
  }
  state = {
    email: '',
  }

在这一部分中，export default导出代码，以便您可以在其他地方的其他组件中使用此组件。 class LogIn extends Component使用此代码创建您的LogIn组件并继承React.Component（在此代码的开头，您可能会遇到类似这样的内容：import React, {Component} from 'react';其余代码也可能是一些值路由器使您的用户能够在屏幕之间导航而无需刷新页面。

让我知道您是否需要有关React的更多信息。如果是我所知，我将非常乐于提供帮助：）

React本机代码的精髓和关于状态和道具的几个问题

1 个答案: