ReactJS

ReactJS

React教程:http://www.runoob.com/react/react-tutorial.html

React国语官方文档:https://doc.react-china.org/

React
Native教程:http://wiki.jikexueyuan.com/project/react-native/

 

React 是一个用来构建用户界面的 JAVASCRIPT
库。

React主要用来构建UI,很多人口以为 React 是
MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设
Instagram 的网站,并叫 2013 年 5 月开源。

React
拥有比高的性能,代码逻辑非常简单,越来越多之食指早已开关心及采取它们。

 

React JS与React Native的区别:

1,React
Js的目的是为使前端的V层更有着组件化
,能还好的复用,它会以简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以叫你打操作dom中抽身出来,只需要操作数据就见面转移相应的dom。(react适用于web端app)
2,React
Native的目的是指望我们能够用前端的艺栈就可创造有会以不同平台运行的一个框架。可以创造有以活动端运行的app,但是性能可能较原生app差一点。(reactnative适用于手机端app)

React副帮派实战-慕课网(https://www.imooc.com/video/10427/0)

(一)React入帮派科目介绍

首赖给提出是于2014年F8(FaceBook组织的岁峰会。马拉松限制于8时内)大会上。

人情办法:

代码量越来越好,越来越难以维护。基于这个。先是Google提出了温馨的前端开发框架:AngularJS(将对准Dom的直接操作释放,通过dereactive实现复杂的DOM修改。但AngularJS存在有的题材,其完全作为一个MVVM框架显得过重。不适用于性能要求比强的站点,如:移动端的Web站。其UI组件的卷入比较复杂。不便于重用。而React解决了这些问题).

初识React:

1、React不是一个完好无缺的MVC,MVVM框架。(其仅承担View层)

2、React跟Web Components不冲突

3、React的风味就是是“轻”

4、组件化的支付思路

React应用场景:

1、复杂现象下之高性能

2、重用组件库,组件组合

3、“懒”

立项-》开发-》上线

读书React知识前,需要掌握文化:

1、JS、CSS基础

2、Sass,Compass

3、Yeoman,Grunt,Webpack(前端自动化方案)

4、CommonJS,NodeJS

5、Git,GitHub

(二)React-JSX-Style

1、React官网:https://reactjs.org/

Get Started进入代码。。。

2、JSX(javascript xml)

JSX是facebook为react开发语法堂(计算机语言中长的某种语法。语法对语言功能并从未影响,但再也便宜程序员使用)。类似有CoffeeScript、TypeScript。

最后还见面吃分析为JS,才会给浏览器解析并实行。

 

 

小心:div和Hello为React的Components实例。而未是真的DOM节点。React的Components最终呈现到页面通过React.render方法。

如:

React.render(<Hello name=”World”
/>,document.getElementById(‘container’))

//参数1:Hello为要渲染的Components
,参数2:为渲染的职位

//翻译啊:将Hello的渲染结果插入到container的器皿被

顾2:React的自定义component
(Hello)声明方式:

var Hello=React.createClass({
//通过createClass创建,参数为凡JS的一个Object

  render:function(){  //key=render &
value=function,function的回来值直接决定了Hello
component最终于渲染之构造

        return <div>Hello
{this.props.name}</div>;
//${this.props.name}表示取JS表达式的值  ,this代表即react
component的实例(Hello),

                             
//props指重补偿加react component时所指定的习性之会师(React.render(<Hello name=”World”
/>,document.getElementById(‘container’)))

   }

})

 

 

修改样式不克就此class,因为class在JS语言的ES6规范里早就让声称也一个重大字,用于表示一个像样。因此无能够在标签中声明class。

改样式可用className或style(内联样式: style=”color:red;” -error用法    & 
stype={{“color:’red’;”}} 
-正确写法)

留神:采用驼峰(fontSize)写法。

3、React-components-Lifecycle

React
Components从创造及没有的生命周期,状态及性能在生命周期中凡是何等流转的。

率先介绍React
components在浏览器被存在的老三个状态:

React Component State初始化:

争以:

props和state差异对比:

props:是组件调用方在调用组件时指定的。props一旦指定是不见面转换的。(专情)

state:私属于即组件的,是可变的。(花心)

修改state值:

聊知识点:this的采取

(this指component的实例Hello。将this保存一份。因为定义在windows.setTimeout(),this会变)

 

等价于《=》

小心:bind(this)指向funciton外面的this,但es5才有,低版本不支持。

4、React-Event-Listener

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章