📜  ReactJS-组件

📅  最后修改于: 2020-10-20 04:47:57             🧑  作者: Mango


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

无状态的例子

在以下示例中,我们的第一个组件是App 。该组件是HeaderContent的所有者。我们将分别创建HeaderContent,然后将其添加到App组件的JSX树中。只需要导出App组件。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         
); } } class Header extends React.Component { render() { return (

Header

); } } class Content extends React.Component { render() { return (

Content

The content text!!!

); } } 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(, document.getElementById('app'));

上面的代码将产生以下结果。

反应组件无状态

有状态的例子

在此示例中,我们将设置所有者组件( App )的状态。就像上一个示例一样,添加了Header组件,因为它不需要任何状态。我们将创建tabletbody元素,而不是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 (
         
{this.state.data.map((person, i) => )}
); } } class Header extends React.Component { render() { return (

Header

); } } class TableRow extends React.Component { render() { return ( {this.props.data.id} {this.props.data.name} {this.props.data.age} ); } } export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

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

反应组件有状态