© fengyu学习
今年9月，为了重构的项目，在一个星期内，我囫囵吞枣似地学习了React。
即便是4个月后的今天，回想起当日，我还是会记得5个小伙伴，每天晚上从7点半起，就准时到会议室里学习React的场景，不免又觉得有些好笑。
如今，重构的项目进入了最后的联调阶段，我也算是经过了实战的洗礼了，不过在探索React的路上跌跌撞撞，确没能留下半点记录，实属遗憾。
我决定将这四个月的经历整理整理，记录下来，已便将来更好的工作学习！
1、Why React?
这是我在项目初期一直在思考的问题，为什么重构的项目选择了 React 。
最初我是这么想的
追求时尚新技术，好耶，棒棒哒！
后来我发现了
-
健全的学习文档及良好的社区 -
github各种轮子 -
需要兼容IE8
再后来我觉得是
-
数据驱动视图 -
方便自定义UI
由于我们是第三方脚本，为了良好的兼容性，之前的脚本都是用 原生JS 。所以我对这么大的框架一下似乎也接受不了。
不过重构的负责人 XB 哥还是说服了我。
-
今日带宽不比往日 -
React@14做了拆分，可以有选择性的引用
加上我的内心也是向往新技术的。
经过了一段时间的使用，我觉得 React 确实有其独特之处，相较于 原生JS 的好处：
-
JSX语法，拥有清晰的dom结构和样式引用，带来与原生JS创建DOM不一样的体验 -
数据驱动视图，一定程度上简化了视图与逻辑分离的难度
下面就开始干货吧！
2、组件、state与props
Component 是 React 中重要的组成部分，大至整个页面，小到一个按钮，都有可能是一个组件。
而 state 与 props 则是一个组件绽放光彩的必备良药！
举个栗子：
import React, {Component} from "react";
import ReactDOM from "react-dom";
class SimpleComponent extends Component {
constructor(props) {
super(props)
}
render() {
return <div>我只是我</div>
}
}
ReactDOM.render(<SimpleComponent/>, document.getElementById('app'));
如此一来 SimpleComponent 组件的 render() 方法就将一个最简单的组件渲染到了网页上，这与html并没有什么区别，并不能展现 React 的强大威力！
下面我们使用 state 给这个 SimpleComponent 做做包装
import React, {Component} from "react";
import ReactDOM from "react-dom";
class SimpleComponent1 extends Component {
constructor(props) {
super();
this.state = {
content: '我就是我，那颜色不一样的烟火',
color: '#F00'
};
}
render() {
let style = {
color: this.state.color
}
return <p style={style}>{this.state.content}</p>
}
componentDidMount() {
setInterval(() => {
this.setState({
color: this.state.color === '#F00' ? '#0F0' : '#F00'
})
}, 1000);
}
}
ReactDOM.render(
<div>
<SimpleComponent/>
<SimpleComponent1/>
</div>,
document.getElementById('app'));
在 componentDidMount() （React 组件自带方法，在第一次执行 render() 方法后执行，表示组件已经加载完毕）中采用 setState() 方法（ React 组件自带方法，能够设置 this.state 中属性的值）对 this.state 中的 color 属性进行设置，使得组件的颜色能够动态改变。
可以看到，利用 state ，我们可以轻松的实现 DOM 的渲染，而不需要直接操作 DOM，但是仅仅有 state ，似乎还缺少了些什么，我们还可以利用 props ，将这个组件更加的完善！
class SimpleComponent2 extends Component {
constructor(props) {
super(props);
this.state = {
content: this.props.content,
color: '#F00'
}
}
render() {
let style = {
color: this.state.color
}
return <p style={style}>{this.state.content}</p>
}
componentDidMount() {
setInterval(() => {
this.setState({
color: this.state.color === '#F00' ? '#0F0' : '#F00'
})
}, 1000);
}
}
ReactDOM.render(
<div>
<SimpleComponent/>
<SimpleComponent1/>
<SimpleComponent2 content="我就是我，颜色不一样的烟火"/>
<SimpleComponent2 content="我也是烟火哦"/>
</div>,
document.getElementById('app'));
首先 props 是依赖外部传入的，如上代码 <SimpleComponent2 content="我也是烟火哦"/> 。
其次在 Component 中使用 props 是直接调用 this.props.属性名称 的。
了解清楚了 props 的用法，再来谈谈使用的必要性。
组件库（泛指如：按钮、日历，树，表格、列表、网格）等基础组件，编写的目的是为了方便使用的。
尽管上面举的例子并不复杂，然而如果我们需要在多个页面使用这个效果时，并不是在每个页面都写一个这样的组件。
而是提取出组件的共同点，找出他们的不同点，共同点利用 state 来实现，不同点利用 props 传入，来达到复用组件的目的
其实 state 与 props 的作用还不止这些，在后续的总结中，还有父子组件通信方面的作用。
3、写在文末
React 的故事才刚刚开始，接触React的时间也不算太长。如有描述不周的地方，请斧正，万分感谢。
相关代码，可以在github上下载
从6月到现在，已有半年没有写文章了。虽说很忙，亦不过是借口而已！
庆幸自己能在 2017 年的初始，重新拾起总结的习惯，新年新气象嘛，加油！
网友评论