组件就是页面上的一部分. 如图, 左边是一个网页. 右边是对应的一个组件图. 我们可以把一个大的网页拆分成很多小的部分. 比如标题部分, 对应一个组件, 就是标题组件. 搜索部分, 对应的组件就是搜索组件. 而这个搜索组件我们可以进一步的拆分, 是由 input 框和 button 组成的. 所以还可以继续把搜索组件拆分成小的组件. 一个是 input 组件, 一个是 button 组件.
页面上很多区域也可以拆分成组件, 所以页面就被拆分成了很多个组件.
一个页面很复杂, 有时候很难编写, 但当我们把他拆分成组件的时候, 再来维护这些小组件的时候就比较简单了. 这就是我们前端组件化的概念.
- import React from 'react';
- import ReactDOM from 'react-dom';
- import App from './App';
- ReactDOM.render(<App />, document.getElementById('root'));
比如在 index.JS 这个入口文件中, import App from './App'; 就是一个组件, 打开这个组件
- import React, { Component } from 'react';
- class App extends Component {
- render() {
- return (
- <div className="App"> hello world
- </div>
- );
- }
- }
- export default App;
这就是一个最基础的 react 组件的定义, 那么我们看 react 组件是如何被定义的. 这个 {Component} 呢, 比较难懂, 这个是 es6 的结构赋值, 我可以把他去掉, 就等价于下面这个
- import React from 'react';
- class App extends React.Component {
- render() {
- return (
- <div className="App"> hello world
- </div>
- );
- }
- }
- export default App;
当我们定义一个 react 组件的时候, 我们看是怎么定义的, 首先我们通过 es6 的写法定义了一个类. 这个类继承了 React 下面的 Component 这个类. 所以当一个类继承了 React,Component 这个类的时候, 他就是一个 react 的组件了.
所以当要去定义一个组件的时候, 只要继承这个 React 下面 Coponent 这个类就可以了. 接着往下看, 这下面有个 render 方法, 这个方法需要返回一个内容. 我们说组件是页面的一部分, 那么这个组件的内容由 render 函数决定, render 函数返回什么, 那么这个组件就返回什么内容. 然后我们通过 export default 这种语法导出出去.
我们再回到 index. 我们知道 App 是一个组件, 在项目中引入了这个组件, 接下来我们看 ReactDOM.render 在做什么, ReactDOM 是一个第三方的模块, 他又一个方法叫做 render, 这个方法可以把一个组件挂载到一个节点上.
这里我们把 App 组件挂载到 id 为 root 的一个节点上. 咋一看我们没有用到 React, 为什么要引入呢, 我们把他删除再看一下, 会提示 Failed to compile. 编译失败, 那为什么会编译失败呢. 我们看下面使用 App 的时候, 不是直接用 App, 而是用 html 标签的形式一样包裹起来. 那么这种语法呢叫做 jsx 的语法, 如果在项目中使用 jsx 这样的语法, 那么就一定要对应的文件里引入 React, 不引入 React 是没法去编译这种 jsx 的语法的.
那么回过头来, 我 App.JS 没有用到 jsx 语法, 但是不引入依然会提示 Failed to compile. 我们看 render 里面的标签,<div></div>, 这个不就是 HTML 标签么, 实际上不是的, 在 React 中, render 函数里面这些标签其实也是 jsx 的语法.
来源: http://www.css88.com/qa/react/14406.html