react学习笔记(一)

  在开篇之前,先来说说选择react的初衷。

  一个初学者,在开始选择深入了解一个框架之前,我查阅了一些资料,做出了对三大框架的一些基本分析。

  1.数据流。Vue和Angular都是支持双向数据绑定,也就是在界面的操作能实时反映到数据,数据的变更能实时显示在界面上。Vue默认为单向数据绑定。React支持单向数据绑定,也就是说给定一个原始的页面,之后添加一些组件化操作,得到一个变化后的页面。

  2.组件化。Vue和React都支持组件化。组件,即对一些数据和方法的封装,它可以用来构建用户页面,并通过任何适当的方式进行组合。React就是建立在组件之上,Vue将指令与组件分开,组件就是有自己的视图和数据的独立单元。Angular则是依赖注入来解决模块之间的依赖问题。

  3.维护和社区。三大框架之所以是三大,他们的功能强大带来的欢迎程度可想而知。但是就背后的老东家而言,Angular是google(这个我们就不说太多了),React是facebook(这个也聊不动),vue是尤雨溪大神!什么?就一个人。没错,它是由一个中国人创造出来的,所以它的官网也是中文(是不是太友好了)。虽然它的出生不是像Angular和React(拼爹确实拼不过),但是它的受欢迎程度却不容小觑。在github上的star已经超过react和angular了,可想而知它是多么的强大。

  4.学习成本。一说如何选择这三大框架,都说到学习成本。而学习成本这个东西本来就是一个很宽泛的概念。对于我来说,学习成本包括框架本身的语法结构,官方文档的阅读的难易程度,上手开发的难易,学习时间跨度长短,还有社区的成熟程度。Vue,React轻,Angular就相对比较重。Vue语法简单,上手开发简单,功能强大,学习成本相对较低,当然是更多人的选择。React虽然较vue学习成本更高,但它的强大与其受欢迎程度也是一个好选择。Angular不太了解,牛人一般也不需要解释。

  5.如何选择。本人原本就是小白一个,告诉如何选择当然是无稽之谈,我只能说下我自己的体会。我在做抉择的时候也是很犹豫,这也是一个初学者的通病。但是看了阮一峰大神的全栈之路,确实受到了一点影响,毕竟入门还是需要一个领路人,阮老师就是一个好的领路人。了解了react的基本资料之后,开始了react的学习之路。

  其实框架就是一个工具,都是用来工作的,用什么不重要,重要的是适合我们来用,同时能创造价值。自己喜欢的东西,再难也不是借口。就好比jquery,它原本就是一颗种子,但现在它已经遍地开花。

时间: 2024-12-17 01:27:17

react学习笔记(一)的相关文章

React学习笔记 - 组件&Props

React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件接收props,返回react元素. 1. 函数定义\类定义组件 最简单组件方式 - 函数定义组件: // 函数定义组件 function Welcome(props) { return <h1>Hello, {props.name}!</h1>

React学习笔记-1-什么是react,react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

React学习笔记---项目构建

简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的工具,对于初学者来说,就有了一个可以学习.开发.测试的平台. Yeoman 官方的介绍是这样形容的:“Web App的脚手架工具” --- Yeoman的目的是帮助用户更好的启动项目,提供最好的实践和工具使用户保持高生产率. Yeoman提供了一个生成器的生态系统,并提供了一个“Yeoman的工作流

react学习笔记1

# 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo.目前为止最新版本为15.3.0,后续没有特别说明,我们都是基于该版本. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

React 学习笔记(学习地址汇总)

好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs/getting-started.html JSX语法地址:http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax

react学习笔记4

<header class="site-header jumbotron"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1>欢迎来到妙味课堂</h1> <p class="lead">妙味课堂是一支独具特色的IT培训团队,妙味反对传

react学习笔记3

<div id="demo"></div> <script type="text/babel"> var ItemComponent = React.createClass({ render:function (){ return ( <li>{this.props.item}</li> ) } }); var ListComponent = React.createClass({ render:funct

React学习笔记(三) 组件传值

组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',] } }, render : function(){ return ( <div> &

react 学习笔记 npm 命令

第一步: cnpm install --save react react-dom babelify babel-preset-react 第二步: 安装es2015 cnpm install babel-preset-es2015 --save