React开发教程6:组件Components
本教程由好办法汇总原创。
这一篇教程将指引你如何使用组件开发网页。
组件的方法将使你不需要改变页面其他部分,就可以更新和改变局部。
无状态组件(Stateless)范例
我们在下面例子中的第一个组件叫 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() 才能在App才能渲染在页面上。
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'));
上述代码的效果如下图:
有状态(Stateful)的组件例子
这一个例子中我们的状态组件叫 (App)。 Header 和上面例子一样。这里我们创建 table 和 tbody 元素动态地把data 数列中的每一个对象输入到 TableRow 中。我们这里使用 EcmaScript 2015 的语法,例如箭头arrow (⇒)。这比标准的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在数据变化时,可以只用更新某些元素而不是渲染整个list。 这大大提升了处理大量数据、添加做动态元素的性能。