ReactJS组件

作者：--    发布时间：2019-11-20

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

无状态示例

下例中的第一个组件是app。 此组件是标题和内容的所有者。这里分别创建header和content，并将其添加到app组件的jsx树中。 只有app组件需要导出。

文件：app.jsx -

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;

为了能够在页面上呈现，需要将它导入main.js文件并调用reactdom.render()。 在设置环境的时候就已经这样做了。

文件：main.js -

import react from 'react';
import reactdom from 'react-dom';
import app from './app.jsx';

reactdom.render(<app />, document.getelementbyid('app'));

上面的代码将生成以下结果 -

有状态的例子

在这个例子中，我们将设置所有者组件(app)的状态。 header组件就像上一个例子一样添加，但它不需要任何状态。这里创建table和tbody元素，而不是content标签，在这里为数据数组中的每个对象动态插入tablerow。
可以看出，我们使用的ecmascript 2015箭头语法(⇒)看起来比旧的javascript语法更清晰。 这将帮助我们用更少的代码来创建元素。 当需要创建一个包含很多项目的列表的时候，它是非常有用的。

文件：app.jsx -

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更新只有必要的元素，而不是在发生更改时重新呈现整个列表。 对于大量动态创建的元素来说，这是一个巨大的性能提升。得到以下结果 -