1 什么是component设计接口的时候,把通用的设计元素(按钮,表单框,布局组件等)拆成接口良好定义的可复用的组件。 这样,下次开发相同界面程序时就可以写更少的代码,也意义着更高的开发效率,更少的 Bug 和更少的程序体积。 Thinking in react 里 ...
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
(#换成@)。