React研习之旅(一):React基础与核心

栏目: JavaScript · 发布时间: 12个月前

来源: juejin.im

本文转载自:https://juejin.im/post/5c1f18ade51d4516da710003,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

作为一个寡言少语的人,一直在享受社区的文章分享和帮助,是它们让我不断成长,这种分享的热情是开源社区繁荣昌盛的根基。某虽不才,也有同样的心情,也想写点东西。不仅仅是个教程系列,也是一个研究学习的过程。近期一直研究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基础与核心》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

React 进阶之路

React 进阶之路

徐超 / 清华大学出版社 / 2018-4 / 69.00元

《React进阶之路》详细介绍了React技术栈涉及的主要技术。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要介绍React的基本用法,包括React 16的新特性;进阶篇深入讲解组件state、虚拟DOM、高阶组件等React中的重要概念,同时对初学者容易困惑的知识点做了介绍;实战篇介绍React Router、Redux和MobX 3个React技术栈的重要成员,并通过实战项目讲解这些技术如......一起来看看 《React 进阶之路》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具