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仅更新必要的元素,而不是在发生更改时重新渲染整个列表。对于大量动态创建的元素而言,这是巨大的性能提升。