React开发教程6:组件Components

React开发教程6:组件Components

本教程由好办法汇总原创。

这一篇教程将指引你如何使用组件开发网页。
组件的方法将使你不需要改变页面其他部分,就可以更新和改变局部。

无状态组件(Stateless)范例

我们在下面例子中的第一个组件叫 App。 这个组件是 HeaderContent 的拥有者。我们可以单独创建 HeaderContent 并把它们添加到我们的 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'));

上述代码的效果如下图:

 

react_components_stateless

有状态(Stateful)的组件例子

这一个例子中我们的状态组件叫 (App)。 Header 和上面例子一样。这里我们创建 tabletbody 元素动态地把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。 这大大提升了处理大量数据、添加做动态元素的性能。

react_components_statefull



 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注