关闭

React入门到精通(一)

标签: react
545人阅读 评论(0) 收藏 举报
分类:

这里写图片描述
React+Node的开发栈可以服务器端渲染,React使用的jsx语言可以支持在js中写HTML。
学习React也是这段时间的目标,所以打算写这么一个系列,供自己沉淀每天学的东西,很多都是网上的教程方法,自己组织一下语言和思路。
Hello-React
GitHub上开源项目:https://github.com/facebook/react
1、什么是React?

React is a JavaScript library for building user interfaces.

React是一个JavaScript库,用来构建用户界面,为数据渲染视图

特点:
声明式设计
高效:React虚拟DOM,最大限度的减少与DOM的交互
灵活:方便与其它库搭配起来
组件:构建组件
JSX:js语法的扩展,允许在js中写HTML
状态:内容与状态对应起来

copy一下阮一峰大神的React入门实例中的原话来介绍以下React:

React 起源于 Facebook的内部项目,由于不满意市面上的JavaScript MVC 框架,决定自己开发一套来架设Instaram网站,然后在2013年5月开源了。

由于React的设计思想及其独特,属于革命性创新,性能出众,代码逻辑却非常简单,可能认为将是Web开发的主流工具。

试想一下如果用Web App的方式去写Native App。那将会颠覆整个互联网行业
2、核心思想

分装组件、各个组件维护自己的状态和UI,当状态改变,自动更新组件,适合功能复杂的应用:组件驱动的开发。
3、核心概念

组件
JSX(用jsx语法取代HTML,在js中描述UI)jsx浏览器不识别,需要转换为js代码(babel将jsx转换为js)

虚拟DOM

diff算法:当更新组件的时候,会通过diff算法寻找到需要更新的DOM 节点,虚拟DOM是存在内存的js数据结构 性能比原生DOM好
数据流:单向数据流(状态与内容)

4、搭建React开发环境

引入三个js文件

react.js(React的核心库)
react-dom.js(提供与DOM相关的功能)
browser.js(将JSX语法转换为JavaScript语法)

5、JSX

基本语法:

遇到HTML标签,使用HTML来解析

遇到代码块({}),使用js解析
6、组件
6.1、创建组件

var HelloMsg = React.createClass();
6.2、使用组件

注意事项:

1、组件的命名:首字母必须大写。

2、在渲染组件,返回要求只有一个标签,但是这个标签可以包含多个子元素。
6.3、复合组件

将其他的组件整合在一起 创建一个新的组件

例子:使用复合组件实现登录窗口
7、ref

如果从组件获得真实的DOM的节点,ref属性
//通过指定ref=’ref名字’–>this.refs.ref名字
function(){ this.refs.inputTxt–>拿到真实的DOM节点 }

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:100737次
    • 积分:1514
    • 等级:
    • 排名:千里之外
    • 原创:51篇
    • 转载:11篇
    • 译文:0篇
    • 评论:25条
    博客专栏
    最新评论