React--组件（初步认识）

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

我们的第一个组件是App。该组件是Header和Content的所有者。我们将分别创建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）的状态。我们将创建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;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';ReactDOM.render(<App/>, document.getElementById('app'));

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