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;
复制代码