ReactJS--组件（为什么说React提高了应用程序性能？）

如何组合组件以使应用程序易于维护。这种方法允许更新和更改组件，而不会影响页面的其余部分。

无状态的例子

在以下示例中，第一个组件是App。该组件是Header和Content的所有者。分别创建Header和Content，并将其添加到App组件的JSX树中。仅需要导出App组件。这样各个组件之间自己维护更新，不会影响其他部分

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

有状态的例子

在此示例中，设置所有者组件（App）的状态。就像上一个示例一样，添加了Header组件，因为它不需要任何状态。我们将创建table和tbody元素，而不是content标签，在其中我们将为数据数组中的每个对象动态插入TableRow。

 

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;

注意-我们在map（）函数中使用key = {i}。这将有助于React仅更新必要的元素，而不是在发生更改时重新渲染整个列表。对于大量动态创建的元素而言，这是巨大的性能提升。