[react002] component基本用法

1 什么是component

设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。 Thinking in react 里面举了一个React 构建可搜索的商品数据的例子。

接下来我们将创建一个好玩的component来全面了解它的组成和运行机制，回顾一下我们在 001 中的 public/index.html 它是直接引用了webpack生成的client.min.js（console里面打印文字）。这样一点都不好玩，接来下我们从头开始构造一个完成的index.hmtl页面.

2. 定义html和引用的js入口

<html>
  <head>
    <meta charset="utf-8">
    <title>React's Component Example</title>
  </head>
  <body>
      <div id="app"></div>
    <script src="client.min.js" type="text/javascript"></script>
  </body>
</html>

在html里面定义一个id= "app" 的 div标签并引用client.min.js,这个html就是我们的入口。时刻记得client.min.js是来自于webpack的entry: src/client.js 里面生成的。所以我们就通过client.js来操作html中的div构建页面。

import React from 'react';
import ReactDom from "react-dom";
import Layout from "./component/Layout";
const app = document.getElementById("app");
ReactDom.render(<Layout />, app);

看懂上面的语法你应该要学会的是基本的JSX语法, 看完后问自己2个问题：

1. 为什么要使用JSX语法？
2. JSX和HTML的差异是什么？

这里你只需要知道 <Layout /> 是引用Layout Component。

页面的构成应该是（页面就是一个Tree，不要什么都堆在一起）

–Layout 
  -—Header 
       –title 
   -—Body 
   -—Footer

2.1. 定义最上层的Layout

import React from 'react';
import Footer from "./Footer";
import Header from "./Header";

export default class Layout extends React.Component {
    render() {
        return (<div>
                <Header />
                <Footer />
                </div>);
    };
}

component 必须要定义的render函数,render是核心, 它组装生成这个组件的HTML结构（使用原生HTML标签或者子组件)。

当调用的时候，会检测 this.props 和 this.state，返回一个单子级组件(注意只能是单个，所以我们用div把header和footer包了一层)。

该子级组件可以是虚拟的本地 DOM 组件（比如 <div /> 或者 React.DOM.div()），也可以是自定义的复合组件。

你也可以返回 null 或者 false 来表明不需要渲染任何东西。实际上，react 渲染一个 <noscript> 标签来处理当前的差异检查逻辑。当返回 null 或者 false 的时候，this.getDOMNode() 将返回 null。

render() 函数应该是纯粹的，也就是说该函数不修改组件state，每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如通过使用setTimeout）。如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。

2.2. 定义Footer

import React from "react";
export default class Footer extends React.Component {
    render() { return(<div> <h3> Footer: Building UI is a funny thing </h3> </div>);}
}

只是简单的把自己用h1显示出来

2.3. 定义Header

import React from "react";
import Title from "./Title";
export default class Header extends React.Component {
    render() {
        return(<div>
               <Title />
               <h3> Header: Component create a new world </h3>
               </div> );
    }
}

我们就可以看到它引用了Title

2.4. 定义Title

import React from "react";
export default class Title extends React.Component {
    render() {
        return(<div>
                <h2> Title: Everything is Component  </h2>
                </div>
        );
    }
}

这上面都是静态的东西，根本就看不出component有什么值得炫酷的地方，只是显示了 title header footer。离标题Title随着我们给定的输入框的文字变化还差得远不过在开始之前, 应该先预习一下component api弄明白它的state和prop。

1. props就是component的属性，由外部通过JSX属性传入设置，一旦初始设置完成，就可以认为this.props是不可更改的，

所以不要轻易更改设置this.props里面的值（虽然对于一个JS对象你可以做任何事）。

2. state是component的当前状态，可以把component简单看成一个“状态机”，根据状态state 呈现不同的UI展示。

一旦状态（数据）更改，component就会自动调用render重新渲染UI，这个更改的动作会通过 this.setState方法来触发。

3. 一条原则：让component尽可能地少状态。这样组件逻辑就越容易维护。当更改这个状态（数据）需要更新组件UI的就可以认为是state

4. 无状态compoent, 我们上面的4个就是这种无状态的。

你也可以用纯粹的函数来定义无状态的组件(stateless function)，这种组件没有状态，没有生命周期，只是简单的接受props 渲染生成DOM 结构。无状态组件非常简单，开销很低，如果可能的话尽量使用无状态组件。

3. 有状态的component

我们要做的就是Layout把要改变的title和改变title的函数一级一级的传给下级的component 这必须要用到component间是怎么通信的。

3.1 父子间通信就是通过props属性来传递, 在父component中给子component设置props,然后子component就可以访问到父component的数据和方法.

3.2 非父子间通信使用全局事件Pub/Sub模式，在componentDidMount里面订阅事件，在 componentWillUnmount里面取消订阅，当收到事件触发的时候调用setState更新UI。

这里我们只用到了父子间通信。

在Layout中把title和changetitle的函数都传给header component，注意传给下一级方法时一定要显示的表明这个方法来自己于哪里 — bind（this)操作。

import React from 'react';
import Footer from "./Footer";
import Header from "./Header";

export default class Layout extends React.Component {
    constructor(){
        super();
        this.state = {title: "welcome"};
    }
    changeTitle(title){
        this.setState({title: title});
    }
    render() {
        return (<div>
                <Header changeTitle={this.changeTitle.bina(this)} title={this.state.title}/>
                <Footer />
                </div>);
    };
}

Header接收到这个Title后如何处理

import React from "react";
import Title from "./Title";
export default class Header extends React.Component {
    handleChange(e) {
        const title = e.target.value;
        this.props.changeTitle(title);
    }
    render() {
        return(<div>
               <Title title={this.props.title}/>
               <input value={this.props.title} onChange= {this.handleChange.bind(this)}/> 
               <input value={this.props.title} onChange= {this.handleChange.bind(this)}/> 
               </div> );
    }
}

Header把title又往下传递给应该处理的Title Component，自己又建了两个输入框，初始值为title,然后再定义一个onChange事件

Title接到title后只需要把它显示成title就行了，这就是它要做的事！

import React from "react";
export default class Title extends React.Component {
    render() {
        return(<div>
               <h2> {this.props.title}  </h2>
                </div>
        );
    }
}

总结上面的流程就是Layout把自己changeTitle的方法和title的属性先传给Header，Header再把他们传给Title。

这里发生了一件非常奇妙的事，我们在Layout Header Title 里都有state, 我们通过input输入框输入文字触发Layout的SetState方法，结果所有的State里面的title都跟着变化啦，这就是virtual DOM的好处,react把操作真实DOM的操作又封装了一层，让我们不用操心哪一个DOM应该更新这种事。 JS很快，慢的只是刷新DOM里面的tree, 而且繁锁，但是react把刷新DOM的操作透明了，简直太贴心啦。

我们打开chrome developer tool 里面timeline的 Rendering下的Enable paint flashing,看看我们在输入的时候是哪一些DOM刷新啦。

可以看出它只是刷新应该刷新的Title Header和input

通过这一章节我们掌握到了什么是component, component的state props及他们之前的区别，父子component之间如何通信。

4 扩展阅读

Web应用组件化的权衡