Question

以下是React Native环境的代码。我可以看到已经创建了一个主组件应用程序。它内部具有状态。但是，混淆了使用状态的实际目的是什么。

 import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App

关于主要 App 组件内的 Header 和 TableRow 组件的想法。但是，与以下几行混淆：

{this.state.data.map((person, i) => <TableRow key = {i} 
                 data = {person} />)}

任何人都可以解释上述语法的工作吗？谢谢。

Answer 1

您想知道为什么React Native使用状态。您应该查看一下Facebook https://facebook.github.io/react-native/docs/state拥有的这份文档并进行举例，然后它将帮助您清晰地头脑。
用于回答示例代码：

{this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
- 首先，它从变量状态map获取数据，并循环遍历以呈现每个行View。如果您执行一些触发来更改数据，例如this.setState({data: []})，它将把视图更改为空并自动刷新视图，并回答状态为何使用in的问题。=））

这很简单！

一些ReactNative的东西让人困惑

1 个答案: