React 组件封装

初窥

通过 create-react-app 构建的 React 工程，其中的 src 目录是我们关注的重点，它是我们编写代码的地方，我们现在需要做的，就是把里面的东西全部删除，然后一步步的尝试自己构建。

首先我们创建一个 index.js 。

// 导入依赖
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 将到在浏览器中显示的内容
class Index extends Component {
  render() {
   return <h1>hello react</h1>
  }
}

// 渲染内容
ReactDOM.render(<Index />, document.getElementById('root'));

记得保持你的环境是 npm start 的状态。

组件

组件是元素复用的思想，也是组件化框架的最只要特征和解决的问题。我们现在要把网页的菜单栏看出一个组件，然后独立的抽象出来，这样做之后，任何需要菜单的页面只要导入该组件，就可以实现代码复用，让维护和扩展都变得简单。

新建一个 header.js 文件。

import React, { Component } from 'react';

// 每一个 extends Component 的 class 都是一个组件
class Header extends Component {
 render() {
   return (<div>我的菜单栏</div>)
 }
}

// 导出组件
export default Header;

/*
 支持这种操作
 export default eader extends Component {}
*/

修改 index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header.js'; // 引入 Header 组件

class Index extends Component {
  render() {
   return (
    <div>
      <Header /> {/* 使用 Header 组件 */}
      <h1>hello react</h1>
    </div>
    )
  }
}

ReactDOM.render(<Index />, document.getElementById('root'));

以上就是 React 组件的封装。