1 什么是component设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。 这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。 Thinking in react 里 ...
![[从零开始react002] component基本用法](/images/loading.gif)
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='/images/loading.gif' data-original="client.min.js" type="text/javascript"></script> </body></html>
在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>); };}4 扩展阅读
Web应用组件化的权衡
原标题：[从零开始react002] component基本用法
关键词：react
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
