react 组件封装原则_React 组件封装

初窥

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

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

// 导入依赖

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

// 将到在浏览器中显示的内容

class Index extends Component {

render() {

return

hello react

}

}

// 渲染内容

ReactDOM.render(, document.getElementById('root'));

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

组件

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

新建一个 header.js 文件。

import React, { Component } from 'react';

// 每一个 extends Component 的 class 都是一个组件

class Header extends Component {

render() {

return (

我的菜单栏

)

}

}

// 导出组件

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 (

{/* 使用 Header 组件 */}

hello react

)

}

}

ReactDOM.render(, document.getElementById('root'));

以上就是 React 组件的封装。