组件状态，事件处理

让我们回到使用React的工作上来。

我们从一个新的例子开始。

const Hello = (props) => { return ( <div> <p> Hello {props.name}, you are {props.age} years old </p> </div> ) }

const App = () => { const name = 'Peter' const age = 10

return ( <div> <h1>Greetings</h1> <Hello name="Maya" age={26 + 10} /> <Hello name={name} age={age} /> </div> ) }copy

Component helper functions

让我们扩展我们的Hello组件，让它猜测被问候者的出生年份。

const Hello = (props) => { const bornYear = () => { const yearNow = new Date().getFullYear() return yearNow - props.age } return ( <div> <p> Hello {props.name}, you are {props.age} years old </p> <p>So you were probably born in {bornYear()}</p> </div> ) }copy

猜测出生年份的逻辑被分离到一个自己的函数中，在组件渲染时被调用。

这个人的年龄不需要作为参数传给函数，因为它可以直接访问传给组件的所有prop。

如果我们仔细检查我们当前的代码，我们会注意到这个辅助函数实际上是定义在另一个函数里面，这个函数定义了我们组件行为。在Java编程中，在另一个函数中定义一个函数是很复杂和麻烦的，所以不是那么常见。然而，在JavaScript中，在函数中定义函数是一种常规操作。

Destructuring

在我们继续前进之前，我们将看一下JavaScript语言的一个小但有用的功能，它是在ES6规范中添加的，它允许我们在赋值时从对象和数组中destructure解构取值。

在我们之前的代码中，我们必须将传递给我们组件的数据引用为props.name和props.age。在这两个表达式中，我们不得不在代码中重复props.age两次。

由于props是一个对象

props = { name: 'Arto Hellas', age: 35, }copy

我们可以通过将属性值直接分配给两个变量name和age来简化我们的组件，然后我们可以在代码中使用。

const Hello = (props) => { const name = props.name const age = props.age const bornYear = () => new Date().getFullYear() - age

return ( <div> <p>Hello {name}, you are {age} years old</p> <p>So you were probably born in {bornYear()}</p> </div> ) }copy

注意，在定义bornYear函数时，我们也利用了箭头函数的更紧凑的语法。如前所述，如果一个箭头函数由一个表达式组成，那么函数体就不需要写在大括号里。在这种更紧凑的形式下，函数只是返回单个表达式的结果。

简而言之，下面显示的两个函数定义是等价的。

const bornYear = () => new Date().getFullYear() - age

const bornYear = () => { return new Date().getFullYear() - age }copy

解构使得变量的赋值更加容易，因为我们可以用它来提取和收集一个对象的属性值到单独的变量中。

const Hello = (props) => { const { name, age } = props const bornYear = () => new Date().getFullYear() - age

return ( <div> <p>Hello {name}, you are {age} years old</p> <p>So you were probably born in {bornYear()}</p> </div> ) }copy

如果我们要解构的对象有以下值

props = { name: 'Arto Hellas', age: 35, }copy

表达式const { name, age } = props 将'Arto Hellas'的值赋给name，将35岁赋给age。

我们可以把解构再向前推进一步。

const Hello = ({ name, age }) => { const bornYear = () => new Date().getFullYear() - age

return ( <div> <p> Hello {name}, you are {age} years old </p> <p>So you were probably born in {bornYear()}</p> </div> ) }copy

传递给组件的prop现在被直接解构为变量name和age。

这意味着我们不是把整个prop对象分配到一个叫做props的变量中，然后再把它的属性分配到变量name和age中。

const Hello = (props) => { const { name, age } = propscopy

我们通过对作为参数传递给组件函数的props对象进行重构，直接将属性值分配给变量。

const Hello = ({ name, age }) => {