赵走x博客
网站访问量:151908
首页
书籍
软件
工具
古诗词
搜索
登录
49、Flux:理念、回顾Whinepad
48、lint、Flow、测试与复验:测试
47、lint、Flow、测试与复验:Flow
46、lint、Flow、测试与复验:ESLint
45、lint、Flow、测试与复验:package.json
44、构建实例应用:<Whinepad>
43、构建实例应用:应用配置
43、构建实例应用:<Excel>:改进的新版本
42、构建实例应用:组件:对话框
41、构建实例应用:组件:Actions
39、构建实例应用:表单:Form
38、构建实例应用:表单:<FormInput>“工厂组件”
37、构建实例应用:表单:Rating组件
36、构建实例应用:表单:Suggest
35、构建实例应用:Button组件
34、构建实例应用:组件
33、构建实例应用:Whinepad v.0.0.1
32、发布
31、开始构建
30、安装必备工具
29、为应用开发做准备:一个模板应用
28、JSX 和表单
27、JSX 和HTML 的区别
26、在JSX 中返回多个节点
25、展开属性
24、HTML 实体
23、JSX入门
22、Excel:一个出色的表格组件:下载表格数据
21、Excel:一个出色的表格组件:即时回放
20、Excel:一个出色的表格组件:搜索
19、Excel:一个出色的表格组件:编辑数据
18、Excel:一个出色的表格组件:排序
17、Excel:一个出色的表格组件
16、 PureRenderMixin
15、 性能优化:避免组件更新
14、 生命周期示例:使用子组件
13、组件生命周期示例:使用mixin
12、组件:生命周期方法
11、中途改变属性
10、从外部访问组件
9、在初始化state 时使用props:一种反模式
8、 props 与state
7、关于DOM 事件的说明
6、组件:带状态的文本框组件
5、组件的state
4、组件的propTypes
3、组件的属性
2、组件的基础
1、Hello World
50、Flux:Store
34、构建实例应用:组件
资源编号:76084
书籍
React快速上手开发
热度:90
在开始阶段,我们轻松地重用了现有的`<Excel>` 组件;然而这个组件已经包含了太多内容。为了体现“分而治之”的思想,我们最好把组件细分为更小、更可重用的组件。举个例子,按钮就应该是一个独立的组件,方便我们在`<Excel> `表格以外的地方使用。
在开始阶段,我们轻松地重用了现有的`
` 组件;然而这个组件已经包含了太多内容。为了体现“分而治之”的思想,我们最好把组件细分为更小、更可重用的组件。举个例子,按钮就应该是一个独立的组件,方便我们在`
`表格以外的地方使用。 此外,这个应用还需要一些专用的组件。比如评分组件,让我们可以通过星星显示打分,而非仅仅显示一个数字。 现在我们来配置这个新的应用,并添加一个辅助工具——组件发现工具。这个工具可以帮你做到下面两点。 * 在一个隔离的环境中开发并测试组件。通常情况下,在应用中开发组件会导致组件和应用的强耦合,从而降低组件的可用性。独立地开发组件可以帮助你在思考如何解耦时作出更明智的选择。 * 方便团队中的其他成员发现并重用已有的组件。随着应用规模的增长,团队成员也会增多。为了避免在同一个组件上出现多人重复开发、导致人力浪费的情况,并且为了促进组件的可重用性(有助于提高应用开发效率),推荐做法是把所有组件以及如何使用的例子全部放在一个地方。 # 1、设置 先按下CTRL+C 结束旧的监听脚本进程,以便开始一个新的。把初始的最小可行产品(minimum viable product,MVP)whinepad v.0.0.1 复制到一个名为whinepad 的新目录中: ``` $ cp -r ~/reactbook/whinepad\ v0.0.1/ ~/reactbook/whinepad $ cd ~/reactbook/whinepad $ sh scripts/watch.sh > Watching js/source/ > Watching css/ js/source/app.js -> js/build/app.js js/source/components/Excel.js -> js/build/components/Excel.js js/source/components/Logo.js -> js/build/components/Logo.js Sun Jan 24 11:10:17 PST 2016 ``` # 2、组件发现工具 我们把这个组件发现工具命名为discovery.html,并放置在根目录下: ``` $ cp index.html discovery.html ``` 这个工具不需要加载整个应用,所以我们不必加载app.js,只需要加载discover.js 就可以了,后者包含了所有的组件示例。因此,你也不必引入应用的bundle.js,只需引入一个单独的包,比如discover-bundle.js: ```
``` 额外进行一次打包也很简单,只需要在build.sh 脚本中添加一行: ``` # js打包 browserify js/build/app.js -o bundle.js browserify js/build/discover.js -o discover-bundle.js ``` 最后,把示例组件
添加到发现工具中(js/source/discover.js): ``` 'use strict'; import Logo from './components/Logo'; import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(
Component discoverer
Logo
{/* 可以在此放置更多的组件示例 */}
, document.getElementById('pad') ); ``` 每当你编写了新的组件后,就可以在这个新组件发现工具(如图6-2 所示)中进行体验。 我们需要在每个新组件诞生后,及时构建并更新这个工具。  图6-2:Whinepad 的组件发现工具