React研习之旅（一）：React基础与核心

为什么写这个系列

做为一个寡言少语的人，一直在享受社区的文章分享和帮助，是它们让我不断成长，这种分享的热情是开源社区繁荣昌盛的根基。某虽不才，也有一样的心情，也想写点东西。不只仅是个教程系列，也是一个研究学习的过程。近期一直研究React，将本身的一些思考摘录下来，分享一下，也欢迎有兴趣的读者留言发表本身的观点，互相探讨学习。

---

react简介

A JavaScript library for building user interfaces：一个用于构建用户界面的JavaScript库

官方这句话措辞恳切严谨，有两点须要注意：

• 灵活：react只是个库，开发者能够自由灵活地选择组件模块。
• 跨平台：react用于构建用户界面，而不只仅是web界面。

react由美国脸谱网（facebook）出品，大厂背书，更加可靠，虽然前段时间出了个改协议事件，因为受到社区的反对，又改了回来，说明其对社区仍是尊重的。

对比Vue框架

由于咱们主题是React，因此咱们会说React的优势，可能带有主观性，也许有失偏颇。但做为一个写过Vue和React的人，仍是想谈谈两者的一些使用感觉。

综合起来： Vue封装度较高，想开发者之所想。 React灵活性好，边界把控的好。

Vue API设计简洁优雅。 React API设计严谨中规中矩。

做为一个严肃的、喜欢折腾代码的人，我更喜欢React。

---

接下来挑几点，说说为什么喜欢React:

• 更灵活的组件写法，Vue推荐 .vue文件，react推荐.jsx文件,就内容而言，.vue导出内容是一个对象,而.jsx自己就是一个合法的js文件，导出内容是一个class，能够写成员方法，在class体外定义方法变量，组件之间还能实现继承。写法与功能上react更增强大。

• 单向数据流，与之对应的是双向数据绑定，由angular独创，它的出现大大提升了开发的效率。而Vue一大特色就在于此：实例加载时将data属性（或data函数返回对象的属性）注册为响应式。这里的data属性更可能是一种应用state的概念，开发者要么将变量定义为data属性，要么定义在data函数里，前者可能形成冗余的响应式，后者形成代码的晦涩难懂。单向数据流保证了数据流的纯净与简单。

• 良好简便的jsx支持 jsx绝对是个很牛掰的发明，在js里写html标签，虽然也有瑕疵，但瑕不掩瑜。这直接赋予了jsUI操做能力，况且React是jsx的原始地。虽然Vue也支持jsx语法，但声明式视图注定了不会好用。

• 清晰的state管理，应用到了必定的规模，会用到状态管理插件，React有redux,Vue有vuex,redux形式store是以props传入的，所以能够在生命周期componentDidUpdate里对props.store做比对处理, 而Vuex形式的store的更改须要在watchers里监听才能感知，这可能致使逻辑的混乱。相比之下，React的单一数据流的好处就展现出来了

• 完全的组件化思想，在react里一些皆是组件，连路由都是。这样的设计系统而统一，而Vue虽然说也是组件化思想，但界限貌似没有划好。

固然了，Vue相比React简单很多，API设计简洁优雅，可是双向数据绑定在小项目中的发挥出色，在逻辑复杂的项目中注定了冗余与维护困难。在我看来Vue更像一个青春张扬的少年，朝气蓬勃。而React则是一名成熟稳重的中年，一丝不苟。因此没有好坏，只是理念不一样而已。

谈谈jsx

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. React坚信渲染逻辑与UI逻辑天生融合：事件处理、状态随时间变化、数据的准备与展示，这意味着jsx是React的一个核心设计，由于web应用的核心就是这三个

关于jsx有如下几点须要注意：

• 本质是对象：jsx会被Rect编译为对象，最终再渲染为html。所以可做为参数，可做返回值返回，可赋值给某一变量
• 不局限在组件内，函数、class组件、普通的函数均可以的
• 大括号语法作插值、传值

再来讲说jsx中的标签及其属性：

• 天生的html标签，这个很少说，属性只能是字符串，注意若是经过大括号传入非字符串值布尔值、对象、函数该属性会被忽略。<div className="div">我是一个div</div>
• 大写的组件标签<MyCompo lover="someone" married={false} />，属性可为任意值。全部属性合并为一个对象传入组件内。可是只有字符串才能展现，假设传入了一个布尔值，想做为文本显示是不可能的，这显示出React的严谨与专业。有一个特殊的属性：children表示做为组件子节点传入的标签

//函数组件
function FnCompo(props){
	return (
		<div className={props.className}>
			{ props.children }
		</div>
	)
}
//class组件
class ClassCompo extends React.Component{
	render(){
		<div className={this.props.className}>
			{ this.props.children }
		</div>
	}
}
//分别使用
<FnCompo className="fn">
	<div>我是一个child标签</div>
</FnCompo>

<ClassCompo className="class">
	<div>我是一个child标签</div>
</ClassCompo >
复制代码

看出端倪了吗？

• 函数组件更适合用于纯粹的UI渲染，更加简便。
• class组件继承自React.Component有完整的生命周期，更适合编写有应用状态的组件

再谈谈高阶组件

来段官方的介绍：

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. 高阶组件是一种组件复用技术，不是官方API，只是一种组合模式。

总结就是：

• 拆分+组合 = 复用。这个过程就是HOC发挥威力的过程
• high-order，也是一种按顺序过程，高阶组件在前，返回组件在后。

举几个项目中的例子：

• 路由拦截，先进入封装的高阶组件，再来check，决定视图流向
• 分发store(redux),提供的provider就是一个高阶组件

注意：高阶组件、关联组件的关系跟父子组件关系有很大的不一样

• 前者便可做props关系，也可做父子关系，后面只能作父子关系。
• 生命周期执行顺序不一样，前面的从外到内，后面的从最里层开始到最外层
• 须要在全部页面组件（一个页面单元）mount完毕后执行一个初始化操做?封装一个HOC

HOC与关联组件

class HOC extends Component{
	render(){
		return <this.props.template/>;
	}
	componentDidMount(){
		console.log('我后执行')
	}
}
class Template extends Component{
	render(){
		return <div>我是一个child节点</div>;
	}
	componentDidMount(){
		console.log('我先执行')
	}
}
class App extends Component{
	render(){
		return <HOC template = { Template }/> } } export default App; 复制代码

画张草图巩固一下

---

小结

本文介绍了React，谈了React的优势，jsx语法、高阶组件。其中不可避免有些主观的成分在。内容有深有浅，不可能面面俱到，不足之处望读者朋友们见谅。

下一篇咱们会介绍视图控制器-路由的概念