育才学习网1.如何写出漂亮的 react 组件
这个是react最新版api，也就是0.14版本做出的改变。
主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。
这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨使用相同的react组件。
新的react包包含了React.createElement,.createClass,ponent,.PropTypes,.children以及其他元素和组件类。这些都是你需要构建组件时助手。
而react-dom包包括ReactDOM.render,.和.findDOMNode。在 react-dom/server ，有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。
总的来说，两者的区别就是：ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（)来使用。
更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，并将其移动到一个更合适的存储库。
2.如何科学的组织React组件样式
React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。
先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loader style-loaderextract-text-webpack-plugin。正在使用的方式我们理想中的文件结构可能会是这样的：- components - modal - modal.jsx - modal.css // 可以是任意预处理器 - dropdown - dropdown.jsx - dropdown.css然而，js现在可以做模块化，css并不行，所有css的定义都可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其他组件，于是我们可以通过命名约定（name convention）来曲线救国（这一点并不局限于react开发）。
@modal-prefix: modal;.@{modal-prefix} {}.@{modal-prefix}-title {}类似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽量避免命名冲突的可能。于是在组件中就可以这样做import React from 'react';import './modal.less';export default React.createClass({ render () { return Hello； }}）；上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用react开发项目，也会用类似的方式）。
CSS in JS之前看到过一个ppt:/vjeux/react-css-in-js，谈到了类似的问题。一个方向是把样式也直接写进组件里，即使用inline style。
首先，直接用传统的inline style并不可取，它对属性的支持有限，比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言，在react中倒是还行：将需要重用的样式对象作为模块导出即可。
其实大家很努力地希望CSS in JS可以实现，比如：react-stylegithub地址它的局限就是上面提到过的属性支持的问题，没有细究这个东西，不太喜欢。local scoped CSS/css-modules/css-modules/webpack/css-loader#local-scope用这个东西现在是webpack官方支持的，已在css-loader中实现，可以真正让你的css代码作为本地声明，类似的代码：// style.css:local(.title) { background: red； }在需要这份样式的组件里引入这个模块：import styles from 'style.css'首先css的语法中是不支持这个：local（)的，我们先看看页面最终的代码：Info到这里应该明白了，其实这也算是个预处理器，它将：local(.title)的类名变成了一个哈希值，仅可以通过模块导入的方式来获取这个哈希值并应用到组件上（生成的类名是可以配置的）。
现在css-loader可以通过添加module选项（详细内容可以参考上面CSS Modules的链接）使得css默认定义的是local scoped的，希望共享的可以用：global（)定义。也可以和预处理器混用：：global { .global-class-name { color: green； }}目前看下来，它只对class名做哈希，也就是说：：local(.title span) // .[hash] span然而：local(.title .name) // .[hash0] .[hash1]这个算是一个有意思的方式，首先它依赖于webpack，而webpack并不局限于React的开发，任何前端项目都可以使用webpack，那么就也都可以使用CSS Modules的概念，不知道这个CSS Modules会有怎么样的发展，感觉可以尝试。
这里是一个使用样例：/css-modules/webpack-demo写在最后的话目前的探索结果暂时是这样，之后可能会继续来填坑。反正现在应该不会去用CSS in JS,CSS Modules可以一试，因为css-loader这个插件基本react的项目里都会使用，写好的组件一个import， 样式和组件都有了，不过仍需实践。
3.react redux怎样写可重用组件
一个网站，从功能上划分，都能整理出一个个细小的组件，比如一个头部，一个按钮，一个banner，那么怎样才能写好一个可以在多个页面共享数据或私有状态的组件呢？ 以一个移动端常见的header头部为例，左边是返回按钮，有的还带有文字，中间是标题文字，右边可能有图片或者文字。
返回按钮 标题 返回按钮 返回文字（backText） 标题（title） 图片或文字（icon） 返回点击事件 图片或文字点击事件（handleClick） 背景样式 文字样式 这8个基本因素是所有头部都共用的，有的可有，有的可无，为了保证每个网页都能调用同一个头部组件，又要确保文本和事件还有样式可以自定义。将可变的因素提取出来，通过变量的方式传入组件。
在react中，传递变量用this.props。 const {backText, title, icon, handleClick} = this.propslet _backText = backText || false, _title = title || false, _icon = icon || falsereturn ( {_backText} {_title} ) 在父容器里面调用header组件的用法和安卓上类似，都是通过参数初始化配置。
handleClick（){ //注意，使用context的童鞋，需要定义contextType才可以，不然会报错 this.context.router.go(-1)}render() { return (
标题（title） 中间内容（content） 左边按钮文本（leftText） 右边按钮文本（rightText） 左边按钮的点击事件（leftClick） 右边按钮的点击事件（rightClick） render() { const {title, content, leftText, rightText, leftClick, rightClick} = this.props //这里再做一次判断空数据或者为定义数据的处理，没人能保证传递进来的参数一定存在或者一定不为空。 return ( {title} {content} {leftText} {rightText} )} 父容器组件调用弹框组件 leftClick（) { //左边按钮事件}rightClick（) { //右边按钮事件}render() { const content = 提示语1提示语2 return (
leftClick（) { //左边按钮事件，隐藏弹框，调用一个action函数，该action函数会改变reducer中state的状态 this.props.BombAction(false)}rightClick（) { //右边按钮事件，点击跳转到下一个页面的路由 this.context.router.push(`/nextRoute`) //这里还需要做一件事，点击确定后，首先要清除掉弹出框的true状态，恢复成false，避免在其他页面共用该组件的弹出框还没点击出发事件就已经弹出来了。这一步也可以在BombBox组件内部用componentWillUnmount（)来触发。
this.props.BombAction(false)}render() { const content = 提示语1提示语2//在叫做global（全局）的reducer定义1个state参数BombStatus，表示弹框的状态，true为显示弹框，false为隐藏弹框。默认是false const {BombStatus} = this.props.global return ( { BombStatus ?
隐藏也是改变state的状态。 还有很多的例子，比如表格，li列表（常见在分页组件上）等等。
无论是一个简单的组件，还是一个复杂的组件，都要记住一点，先抽象出来可变的内容和事件，然后通过action去控制组件的state状态，不要在组件内部去用setState和getState，前提是你也是用redux来管理state。
组件是个view，要保证组件的纯净，这样服用的程度就会更高。我的原创链接：/p/23776652。
转载请注明出处育才学习网 » react怎么写组件