1.1. 什么是组件？

前端开发中组件也称为UI组件，组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分。UI组件包含了这样一个或几个具有各自功能的代码段，最终完成了用户界面的表示。React鼓励你为每一个关注点创造出一个独立的组件，比如：

<App> 代表整个应用

<Header> 代表头部

<DataGrid> 代表数据表格

<Footer> 代表底部

当然，以上组件内部还是可以细分，比如数据表格，由表头、行、分页条等等。React做开发其实就是为页面中的功能开发对应的组件，然后在把这些组件整合在一起就变成了一个完整的应用。

1.2. Hello组件

期望网页中输出 <h1>Hello</h1>

1.2.1创建组件

React创建组件只需要通过，React.createClass({ /* 组件定义信息 */ })，render方法代表渲染（展示）到页面的内容。

React采用模块化开发，所以每一个组件应该放在一个模块中（独立的js文件中）。

src/components/Hello.js

import React from 'react';

import ReactDOM from 'react-dom';

class Hello extends React.Component{

  constructor(props){

   super(props);

          }

   render(){

       return <h1>hello ,world</h1>

    }

        }

export default Hello;

1.2.2 使用组件

使用组件，首先先导入组件，然后就可以像标签一样使用。

//组件采用模块管理，所以我们使用组件需要导入

import Hello from './components/Hello'; 
ReactDOM.render(<Hello />, document.getElementById('app') );

1.2.3 动态数据展示

Hello组件目前只能显示某个固定的值，也就说显示的文本现在是写死在代码中。return <h1>Hello</h1>;

使用表达式{}，可以动态的获取需要显示的值。使用组件的时候，把需要显示的文本传递给组件对象。

<Hello text=‘今天天气不错’  />

组件内部this.props代表所有属性对象，使用this.props.text获取具体某个属性值。通过标签属性方式传入，组件内部使用this.props.propName获取属性值。

<body>

    <div id="example">

    </div>

    <script type="text/babel">

        class Hello extends React.Component{

          constructor(props){

            super(props);

          }

          render(){

             return <h1>{this.props.hello}</h1>

          }

        }

        ReactDOM.render(<

Hello

hello="hello,world"/>,document.getElementById('example')) </script> </body>

1.2.4 子节点

使用一个自定义的组件的时候，就跟我们以前使用一个HTML标签的方式一模一样，可以通过属性传入数据给组件对象，此外，可以通过“子节点”的方式把内容传给组件对象，使用this.props.children获取。

比如：<Message name=’香菇’>快来吃我，我很蓝瘦</Message>

this.props.name 香菇

this.props.children 快来吃我，我很蓝瘦

<body>

    <div id="example">

    </div>

    <script type="text/babel">

        class Hello extends React.Component{

          constructor(props){

            super(props);

          }

          render(){

             return <h1>{this.props.hello} -- {this.props.children}</h1>

          }

        }

        ReactDOM.render(<Hello hello="hello,world">child text</Hello>,document.getElementById('example'))

    </script>

  </body>

1.2.5 属性默认值

一个组件可能有很多的属性组件，有的属性不要求使用者必须设置值，但是又希望该属性拥有一个默认值。

es5中使用getDefaultProps 方法可以用来设置组件属性的默认值，getDefaultProps的返回值就是默认值。

es6中如下：

class Video extends React.Component {

  static defaultProps = {

    autoPlay: false,

    maxLoops: 10,

  }

  static propTypes = {

    autoPlay: React.PropTypes.bool.isRequired,

    maxLoops: React.PropTypes.number.isRequired,

    posterFrameSrc: React.PropTypes.string.isRequired,

    videoSrc: React.PropTypes.string.isRequired,

  }

  state = {

    loopsRemaining: this.props.maxLoops,

  }

}

1.3 列表组件

1.3.1. 组件需求

期望网页根据一个数组生成一个列表。

<ul>

<li>aaaa</li>

<li>bbbb</li>

<li>cccc</li>

</ul>

1.3.2. 创建组件

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example">

    </div>

    <script type="text/babel">

        class Hello extends React.Component{

          constructor(props){

            super(props);

          }

          render(){

            console.log(this.props.datas);

             var data = this.props.datas.map((item,index)=>{return (<li>第{index},{item}</li>)});

             return (

               <ul>

                 {data}

               </ul>

             );

          }

        }

        ReactDOM.render(<Hello datas={["hello","world","!!!"]}/>,document.getElementById('example'))

    </script>

  </body>

</html>

1.3.3. 列表问题

如果以上代码，没有意外会出现：

Each child in an array or iterator should have a unique "key" prop.

一个数组或迭代器中的每个子元素都应该有一个唯一的“key”键。

列表中React需要我们为的每个元素提供一个唯一的“key”标识符，使得React能够更智能的重用一个组件（因为DOM的创建是非常耗时的），还是销毁并重新创建一个组件，从而提高性能。

简单理解：key可以提高react的渲染性能。

1.4. 复合组件

React让我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

1.4.1. 组件需求

输出网站名称和网址的组件。

主组件：（WebSite）

网站名称的组件；(Name)

网址地址组件；(Link)

<WebSite name=‘源代码’ src=’http://www.itsource.cn’ />

1.4.2. 组件代码

//显示网站名称组件

import React from 'react';

import ReactDOM from 'react-dom';

 class Name extends React.Component{

          constructor(props){

            super(props);

          }

          render(){

            return (<span>{this.props.name}</span>)

          }

        }

export default Name;

//显示网站地址组件

import React from 'react';

import ReactDOM from 'react-dom';

class Link extends React.Component{

          constructor(props){

            super(props);

          }

          render(){

            return (<a href={this.props.url}>{this.props.url}</a>);

          }

        };

export default Link;

//复合组件

import React from 'react';

import Name from './Name';

import Link from './Link';

  class WebSite extends React.Component{

          constructor(props){

            super(props);

          }

          render(){

            return (

                <div>

                  <Name name={this.props.name}/>

                  <br/>

                  <Link url={this.props.url}/>

                </div>

            );

          }

        }

export default WebSite;

1.4.3. 使用复合组件

index.js入口文件

import React from 'react';

import ReactDOM from 'react-dom';

import WebSite from './components/WebSite';

  ReactDOM.render(<WebSite name="website name---name compnent"  url="url - urlLink"/>,document.getElementById('example'))

　运行结果：

1.4.4. 复合组件数据流

数据流：由父节点传递到子节点，如果顶层组件props改变了，React会向下传递。

【04】react 之复合组件的更多相关文章

React: React的复合组件
一.介绍不论Web界面是多么的复杂,它都是由一个个简单的组件组合起来实现的,既然会创建一个简单的组件,那么复杂的组件就有了下手的切入点了.现在来实现一个简单的复合组件.一个颜色面板,一共三部分组成. ...
react基础语法（三）组件的创建和复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
React Native 之组件化开发
前言学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸当点击时,组件的透明度会改变,可以 ...
React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

随机推荐

linux的一些指令
linux的一些指令 █查看指令參數man 指令,如:man ls ,按q鍵退出 █查看文件列表ls -lht 按時間排序ll 列表ls 列表目錄cd 目錄名稱進入路徑cd .. 返回上層路徑 █ ...
二、C到C++的升级
C++ 的加强主要表现在:类型的加强.面向对象支持 1.C++改进 C++更强调语言的实用性,所有的变量都可以再需要使用的时候再定义,C语言中的变量都必须在作用域开始的位置定义 int c = 0; ...
shell基础及变量符号
kernel主要的功能: 1.内存的管理 2.设备驱动程序 3.文件系统的管理 4.进程的管理 5.网络系统 vim /etc/profile.d/ profile(主配置文件) .d(子配置文件 ...
Python导入模块方法
import module_name 导入整个模块 from module_name import function_name 导入特定函数 from module_name import funct ...
Contest - 中南大学第六届大学生程序设计竞赛（Semilive）
题1:1160十进制-十六进制注意他给的数据范围 2^31,int是 2^31-1 #include<iostream> using namespace std; int main() ...
Python协程详解(二)
上一章,我们介绍了Python的协程,并讲到用yield达到协程的效果,这一章,我们来介绍yield from的结构和作用我们先来对比下yield和yield from的用法 def first_g ...
非负矩阵分解（NMF）原理及算法实现
一.矩阵分解回想矩阵分解是指将一个矩阵分解成两个或者多个矩阵的乘积.对于上述的用户-商品(评分矩阵),记为能够将其分解为两个或者多个矩阵的乘积,如果分解成两个矩阵和 .我们要使得矩阵和的乘积能够还 ...
洛谷P1553数字反转升级版
题目链接:https://www.luogu.org/problemnew/show/P1553
php和js中数组的总结
php中数组的表示方法:array()或者[] js中数组的表示方法:new array()或者[] 一.php中初始化命名数组在PHP中声明数组的方式主要有两种:一是应用array()函数声明 ...
Linux服务器管理员必备Linux命令TOP5
Linux桌面环境的界面友好度.图形性能及附件工具已经大幅进化,然而Linux服务器却还没有能达到这一步. 作为系统管理员必须熟练掌握Linux命令.Linux命令的内容很多,其中的一些TOP命令对于 ...

【04】react 之 复合组件