REACT火速入门,js深入学习详细深入分析
分类:前端技术

React.js浓郁学习详细解析

2016/07/16 · JavaScript · ReactJS

本文小编: 伯乐在线 - winty 。未经我许可,防止转发!
招待参与伯乐在线 专辑我。

今日,继续浓烈学习react.js。

目录:

一、JSX介绍

二、React组件生命周期详明

三、属性、状态的含义和用法

四、React中事件的用法

五、组件的贰只使用

六、React中的双向绑定

 一、JSX介绍

①定义

JSX=JavaScript XML,是生龙活虎种在React组件内部营造标签的类XML语法。React在不选拔JSX的情形下大器晚成致可以干活,不过使用JSX能够增加组件的可读性,加强JS语义,结构清晰,抽象程度高,代码模块化。因此推荐在React中应用JSX。

②特点

1、成分名首字母大写

2、相符嵌套准绳

3、能够写入求值表明式

4、驼峰式命名

5、不能利用javascript原生函数的风度翩翩部分生死攸关词,如for和class。必要替换来htmlFor和className

③使用办法

1、使用动态值:JSX将八个花括号之间的内容{…}渲染为动态值,花括号指明了二个javascript上下文遭遇,花括号内部能够是一个变量,也足以是函数。 比方:

JavaScript

var name=“winty”; <p>{name}</p>

1
2
3
var name=“winty”;
 
<p>{name}</p>

JavaScript

function date(d){ return [ d.getFullYear(), d.getMonth() 1, d.getDate() ].join('-); }; <p>{date(new Date()}</p>

1
2
3
4
5
6
7
8
function date(d){
  return [
    d.getFullYear(),
    d.getMonth() 1,
    d.getDate()
  ].join('-);
};
<p>{date(new Date()}</p>

2.注释:首先,在子节点中注释要用大括号包裹起来,然后就足以单行注释/**/,也得以多行注释//。

JavaScript

var Hello=React.createClass({ render:function(){ return <p name="winty"> //set name Hello ,World /* 多行注释 多行注释 */ </p> } });

1
2
3
4
5
6
7
8
9
10
11
var Hello=React.createClass({
     render:function(){
         return <p name="winty"> //set name
                  Hello ,World
                  /*
                    多行注释
                    多行注释
                  */
                  </p>
           }
   });

3.利用CSS内联样式

JavaScript

var style={ color:#000; }; React.render(<div style={style}>....</div>,document.body);

1
2
3
4
var style={
    color:#000;
};
React.render(<div style={style}>....</div>,document.body);

4.施用原则剖断

JavaScript

//方法1,三目运算符 var Hello=React.createClass({ render:function(){ return <p>Hello,{this.props.name?this.props.name : "LuckyWinty"}</p> } }); //方法2,if-else语句 var Hello1=React.createClass({ getName:function(){ if(this.props.name) return this.props.name; else return "LuckyWinty"; render:function(){ return <p>Hello,{this.getName}</p> } }); //方法3,使用逻辑||运算符 var Hello3=React.createClass({ render:function(){ return <p>Hello,{this.props.name||"LuckyWinty"}</p> } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//方法1,三目运算符
var Hello=React.createClass({
     render:function(){
        return <p>Hello,{this.props.name?this.props.name : "LuckyWinty"}</p>
     }
});
 
//方法2,if-else语句
var Hello1=React.createClass({
     getName:function(){
          if(this.props.name)
            return this.props.name;
          else
            return "LuckyWinty";
     render:function(){
        return <p>Hello,{this.getName}</p>
     }
});
//方法3,使用逻辑||运算符
var Hello3=React.createClass({
     render:function(){
        return <p>Hello,{this.props.name||"LuckyWinty"}</p>
     }
});

④非DOM属性介绍

JSX中有3个非DOM属性,分别是:dangerouslySetInnerHTML、ref、key。

dangerouslySetInnerHTML:在JSX中央职能部门接插入HTML代码,不过假使能幸免选取那些本性则尽量制止使用。

老式的接受 innerHTML 也许会招致 cross-site scripting (XSS) 攻击。 净化客商的输入来呈现的时候,平常会冒出谬误,不合适的清洁也是招致网页攻击 的自始至终的经过之后生可畏。

在干净的通晓安全难点后果并科学地净化数据现在,生成只含有独一key __html 的对象,何况对象的值是卫生后的数码。举例:

JavaScript

function createMarkup() { return {__html: 'First · Second'}; }; <div dangerouslySetInnerHTML={createMarkup()} />

1
2
3
4
function createMarkup() {
  return {__html: 'First &middot; Second'};
};
<div dangerouslySetInnerHTML={createMarkup()} />

ref:父组件援用子组件,你可以透过在性质中设置期待的引用名来定义三个引用。比方:

JavaScript

... render:function(){ return <div> <input ref="MyInput" .../> </div> } ... //然后您就足以在组件中的任什么地点方使用this.refs.myInput获取这些援用了

1
2
3
4
5
6
7
8
...
render:function(){
  return <div>
           <input ref="MyInput" .../>
           </div>
}
...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了

key:是一个可选的举世无双标记符,通过给组件设置三个无比的键,并保证它在叁个渲染周期中保持豆蔻梢头致,使得React能够更只可以地垄断(monopoly卡塔 尔(阿拉伯语:قطر‎应该起用一个零件照旧销毁等量齐观建三个零构件,进而增加渲染品质。举个例子:

JavaScript

var Hello3=React.createClass({ render:function(){ return <ul> <li key="1">1</li> <li key="2">2</li> <li key="3">3</li> </ul> } });

1
2
3
4
5
6
7
8
9
var Hello3=React.createClass({
     render:function(){
        return <ul>
                <li key="1">1</li>
                <li key="2">2</li>
                <li key="3">3</li>
         </ul>
     }
});

更加的多详细音讯请参见:

 

二、React组件生命周期详明

组件本质上便是状态机,输入鲜明,输出一定分明。状态和结果后生可畏风华正茂对应,进而使程序变得直观。状态发生转移时会触发不相同的钩函数,从而让开荒者有空子做出响应。能够用事件的思绪来通晓状态,但是事件与事件时期相互独立,但是差异意况之间或然会相互功能。

组件的具备处境结合起来就成了组件的生命周期。即:开始化阶段->运维中阶段->销毁阶段。

昨今不相同生命周期内足以自定义的函数

初步化阶段:

①getDefaultProps:获取暗中认可属性,只调用一回,是在createClass之后调用的。实例之间分享援用

②getInitialState:伊始化每一个实例的蓄意起头化状态

③componentWillMount:mout就是装载的意味,那一个办法的意味就是说组件将要棉被服装载到页面中,也是render早先最终二回改革景况的空子

④render:组件在render函数生成设想节点,最终由react将设想节点形成真的的节点渲染到页面上。只可以访问this.props和this.state,独有三个顶层组件,最佳不用改造情状和DOM输出。

⑤componentDidMount:组件棉被服装载后才会被调用,约等于说调用这么些办法的时候,组件已经被渲染到了页面上,当时可以修正DOM

那多个函数的推行各种正是从上到下的。须求在乎的是getDefaultProps只会在组件的率先个实例被最早化的时候被调用,也正是说第贰个实例之后都以从getInitialState最初调用。同三个构件的具有实例的暗中认可属性都以同样的。

要害测验代码:

JavaScript

<script type="text/babel"> var Hello=React.createClass({ getDefaultProps:function(){ console.log("getDefaultProps, 1"); }, getInitialState:function(){ console.log("getInitialState, 2"); return null; }, componentWillMount:function(){ console.log("componentWillMount, 3"); }, render:function(){ console.log("render, 4"); return <p>Hi,LuckyWinty!</p> }, componentDidMount:function(){ console.log("componentDidMount, 5"); }, }); React.render(<Hello></Hello>,document.body); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/babel">
    var Hello=React.createClass({
      getDefaultProps:function(){
          console.log("getDefaultProps, 1");
      },
      getInitialState:function(){
          console.log("getInitialState, 2");
          return null;
      },
      componentWillMount:function(){
          console.log("componentWillMount, 3");
      },
      render:function(){
          console.log("render, 4");
          return <p>Hi,LuckyWinty!</p>
      },
      componentDidMount:function(){
          console.log("componentDidMount, 5");
      },
    });
    React.render(<Hello></Hello>,document.body);
</script>

运营结果:

图片 1

运作中阶段:

①componentWillReceiveProps:这些函数在组件将在采纳到属性时接触的,或许是父组件的习性发生变化时,属性在传递到构件在此之前,开垦者有空子通过那一个函数去管理属性。比方改正,更新内部景色等。

②shouldComponentUpdate:当组件接纳到新属性可能新情形的时候接触的。那么些是多个疑点函数,也便是说大家得以告知react不去立异某些组件。因为临时候属性或许状态并不会变成组件产生更新。在组件不须要更新的意况下,手动使shouldComponentUpdate重回false,那样react就无需再通过render和diff算法去推断是或不是要翻新,进而加强质量。

③componentWillUpdate:render触发在此之前接触,更新组件,不能够改改属性和境况

④render:组件在render函数生成设想节点,最终由react将虚拟节点造成真的的节点渲染到页面上,只可以访谈this.props和this.state,独有八个顶层组件,最棒不要涂改意况和DOM输出。

⑤componentDidUpdate:render之后,真正的DOM被渲染之后调用

备考:那多个函数的实施各种也是从上到下的。那些的测量检验代码已上传至:

销毁阶段:

①componentWillUnmount:那几个函数在销毁操作真正实行在此之前调用,给开采者最终的机会进行局地清总管业。

三、属性、状态的意思和用法

性情的意义:

props=properties,属性是不得以由组件本身举办改进的,组件的天性是由父组件传递步入的。

属性的用法:

一、键值对

XHTML

<Hello name="winty"/> 字符串 <Hello name={123}/> 大括号包裹的求值表明式 <Hello name={[1,2,3]}/> 传入数组 <Hello name={winty}/> 变量

1
2
3
4
<Hello name="winty"/>   字符串
<Hello name={123}/>    大括号包裹的求值表达式
<Hello name={[1,2,3]}/>   传入数组
<Hello name={winty}/>   变量

二、打开定义(个人感觉便是对象式定义卡塔 尔(英语:State of Qatar)

JavaScript

var props={ one:"123", two:"22" }

1
2
3
4
var props={
   one:"123",
   two:"22"
}

那般定义的话,理论上接收相应是one={props.one}那样调用,可是这么写起来比较繁杂,况兼只要数据被涂改,就必要相应矫正相应的赋值,何况不或然动态地安装属性,所以react中增添了风流罗曼蒂克种张开语法:

<Hello {…props}/>    //也便是多个点加上对象名称。

如此那般使用进行语法,react就能够活动把对象中的变量和值当做是性质的赋值,所以Hello实际上就得到了one、two两脾性情,若无四个点的话,Hello得到的实在就是props对象,使用的时候还亟需本人从当中抽取变量和值

三、调用react提供的setProps(卡塔 尔(英语:State of Qatar)函数(差相当少不用卡塔尔

JavaScript

var instance=React.render(<HelloWorld></HelloWorld>,document.body); instance.setProps({name:"winty"});

1
2
var instance=React.render(<HelloWorld></HelloWorld>,document.body);
instance.setProps({name:"winty"});

情况的意思:

state,状态是由事物自行管理、不断转变的

意况的用法:

getInitialState:早先化实例的图景

setState:更新组件状态,风流罗曼蒂克旦更新了状态,那么就能够触发diff算法,检查内容是还是不是产生变化,若有生成则更新组件,不然就绝不。

质量和状态相比较

相同点:都以纯JS对象、都会触发render更新、都具有显然。

图片 2

质量和情景区分:组件在运行时索要改正的数码就是气象

四、React中事件的用法

事件处理函数:React绑定事件微机的不二诀要和HTML语法特别周边,全体的风浪在命名上与原生的javascript标准黄金年代致,并且会在同风流倜傥的水田下接触。

编写函数

handleClick:function(){

}

绑定

onClick={this.handleClick}

种种事件详细表达:

①移动设备上的触摸事件:onTouchCancel、onTouchEnd、onTouchMove、onTouchStart

②键盘类事件:onKeyDown、onKeyPress、onKeyUp

③剪切类事件:onCopy、onCut、onPaste

④表单类:onChange//内容改造即触发、onInput//输入框、onSubmit//禁绝表单暗许跳转行为

⑤事件:onFocus、onBlur

⑥UI元素类:onScroll

⑦鼠标滚动事件:onWheel

⑧鼠标类型:onClick、onContextMenu//右键菜单、onDoubleClick //双击、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp

⑨拖拽事件:onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart

事件目的介绍

动用方法:固然在编写事件指标管理函数的时候,增多一个参数。拿到那个目的之后,就由此对象的品质来能够赢得一些新闻。

例如:

JavaScript

handleChange:function(event){ console.log(event.target.value); }

1
2
3
handleChange:function(event){
    console.log(event.target.value);
}

事必躬亲中,event就是事件指标,event.target正是事件目标的属性,正是相应的DOM成分,得到这一个因素之后再拿走它的值。

事件指标属性

通用属性:

图片 3

别的差别档案的次序的平地风波有区别的本性,简单询问一下

图片 4

知晓了风浪的局部品质,我们就足以很有益于地在React中拿走这么些属性,实行部分逻辑的管理,完毕部分头晕目眩的作业作用、页面效果等。

比方说:大家能够利用鼠标事件性质,实时展现鼠标在某些区域的坐标:

JavaScript

<script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState: function () { return { x: 0, y: 0 } }, handleMouseMove: function (event) { this.setState({ x: event.clientX, y: event.clientY }); }, render: function () { return <div onMouseMove={this.handleMouseMove} style={{ height: '500px', width: '500px', backgroundColor: 'gray' }}> {this.state.x ', ' this.state.y} </div>; }, }); React.render(<HelloWorld></HelloWorld>, document.body); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/jsx">
        var HelloWorld = React.createClass({
            getInitialState: function () {
                return {
                    x: 0,
                    y: 0
                }
            },
            handleMouseMove: function (event) {
                this.setState({
                    x: event.clientX,
                    y: event.clientY
                });
            },
            render: function () {
                return <div onMouseMove={this.handleMouseMove} style={{
                    height: '500px',
                    width: '500px',
                    backgroundColor: 'gray'
                }}>
                {this.state.x ', ' this.state.y}
                </div>;
            },
        });
        React.render(<HelloWorld></HelloWorld>, document.body);
    </script>

五、组件的联名使用

零器件合营使用的定义:组件的一齐本质上正是对组件的一种集体、管理艺术。

零器件合作应用的指标:逻辑清晰、代码模块化、封装细节、代码可复用。

零件合作使用的法子:

①零零件嵌套使用:也便是说,用二个父组件把子组件封装起来,本质就是父亲和儿子关系。如下图描述:

图片 5

实例代码:

JavaScript

var React = require('react'); var CommentList=require('./CommentList.jsx'); var CommentForm=require('./commentFrom.jsx'); var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList /> //这是一个构件 <CommentForm /> //那是另一个零器件 </div> ); } }); module.exports = CommentBox;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var React = require('react');
var CommentList=require('./CommentList.jsx');
var CommentForm=require('./commentFrom.jsx');
 
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />   //这是一个组件
        <CommentForm />    //这是另一个组件
      </div>
    );
  }
});
 
module.exports = CommentBox;

老爹和儿子组件之间的通讯:

父组件->子组件:通过质量,父组件把数据通过质量来传递给子组件

子组件->父组件:本质上,子组件不可能向父组件通讯。不过能够直接地通过接触事件来通讯,相当于委托。

嵌套组合缺点:

父亲和儿子关系的切实落到实处须要通过深思,贸然编写将产生关系混乱、代码难以保证

不能精晓所有细节,使用者只领会组件用法,不晓得达成细节,遭受难题难以修复

②Mixin:相当于能够把相像的代码抽象出来,封装成一个函数,然后再调用。

Mixin的目的:横向分离出组件的相像代码

日常概念:面向切向面编制程序、插件

实例代码:

JavaScript

var Time=React.createClass({ mixins:[IntervalMixin(1000)], getInitialState:function(){ return {secondElapsed:0}; }, onTick:function(){ this.setState({secondElapsed:this.state.secondElapsed 1}); }, render:function(){ return ( <div>Seconds Elapsed:{this.state.secondsElapsed}</div> ); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Time=React.createClass({
    mixins:[IntervalMixin(1000)],
    getInitialState:function(){
       return {secondElapsed:0};
    },
    onTick:function(){
    this.setState({secondElapsed:this.state.secondElapsed 1});
    },
    render:function(){
    return (
       <div>Seconds Elapsed:{this.state.secondsElapsed}</div>
    );
    }
});

mixin万分轻巧,它们即是勾兑进组件类中的对象而已。React在此方面达成得越来越无时或忘,它能防御静默函数覆盖,同临时常候还援助七个mixin混合。不过这么些功能在别的系统中或者孳生矛盾。比如:

JavaScript

React.createClass({ mixins:[{ getInitialState:function(){ return {a:1}} }], getInitialState:function(){ return {b:2}} });

1
2
3
4
5
6
React.createClass({
    mixins:[{
      getInitialState:function(){  return {a:1}}
    }],
    getInitialState:function(){  return {b:2}}
});

这么在mixin和构件类中并且定义了getInitialState方法,获得的最早state是{a:1,b:2}.假若mixin中的方法和构件类中的方法再次回到的指标中留存重复的键,React会抛出一个八花九裂来警戒那个主题素材。

 六、React中的双向绑定

React成立的意见跟angular那么些框架正是见仁见智的,React是单向数据绑定的。那么怎么落到实处像angular那样的双向绑定效果啊?看代码:

XHTML

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>React中的双向数据绑定</title> </head> <body> <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script> <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script> <script type="text/jsx"> var BindingMixin = { handleChange: function(key) { var that = this var newState = {} return function(event) { newState[key] = event.target.value that.setState(newState) } } } var BindingExample = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { return { text: '', comment: '', } }, render: function() { return <div> <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} /> <textarea valueLink={this.linkState('comment')}></textarea> <h3>{this.state.text}</h3> <h3>{this.state.comment}</h3> </div> } }) React.render(<BindingExample></BindingExample>, document.body); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>React中的双向数据绑定</title>
</head>
<body>
    <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
    <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
    <script type="text/jsx">
        var BindingMixin = {
            handleChange: function(key) {
                var that = this
                var newState = {}
                return function(event) {  
                    newState[key] = event.target.value
                    that.setState(newState)
                }
            }
        }
        var BindingExample = React.createClass({
            mixins: [React.addons.LinkedStateMixin],
            getInitialState: function() {
                return {
                    text: '',
                    comment: '',
                }
            },
            render: function() {
                return <div>
                    <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} />
                    <textarea valueLink={this.linkState('comment')}></textarea>
                    <h3>{this.state.text}</h3>
                    <h3>{this.state.comment}</h3>
                </div>
            }
        })
        React.render(<BindingExample></BindingExample>, document.body);
    </script>
</body>
</html>

功能图(未有CSS样式,有一点点不美观,见谅卡塔尔国:

图片 6

越来越多读书demo已上传至:

参照他事他说加以考查资料:

《React引领以后的顾客分界面开荒框架》

极客高校摄像课程

打赏支持本身写出更加的多好小说,谢谢!

打赏小编

一、HTML 模板

零、安装
React 的安装包,能够到官方网址下载。可是,React 德姆os 已经自带 React 源码,不用别的安装,只需把那几个库拷贝到您的硬盘就行了。

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
a). 注意点最终叁个<script>标签的type属性为text/label,那是因为React独有的JSX语法和JS不一样盟。凡是利用JSX的地点,都要抬高type="text/label";

打赏襄助本身写出越来越多好散文,感谢!

任选大器晚成种支付方式

图片 7 图片 8

1 赞 3 收藏 评论

选拔 React 的网页源码,结构大意上如下。

$ git clone git@github.com:ruanyf/react-demos.git
万黄金时代您没设置 git, 那就径直下载 zip 压缩包。

b). 上边的代码应用了四个库:react.js/react-dom.js/Browser.js,它们都以必需首先加载。个中react.js是React的核心库,react-dom.js是提供与DOM相关的机能,Browser.js的功效是将JSX语法转为javascript语法。(这一步是很耗费时间间的,在事实上线的时候,应该将它内置服务器完成卡塔 尔(英语:State of Qatar)
1.ReactDOM.render()
ReactDOM.render是React的最大旨的点子,用于将模板转为HTML语言,并插入钦赐的DOM节点,如:
ReactDOM.render(
<h1>Hello,world</h1>,
document.getElementById('example')
);
//上边代码将多少个 h1 标题,插入 example 节点
2.JSX语法
JSX的语法允许HTML语言直接写在JavaScript语言之中,不加任何引号具体点来讲:JSX遭受HTML标签(以<开始),就用HTML准则解析;碰到代码块(以{开头),就用JavaScript法则解析
3.组件
React运送毒品将代码封装成组件(Component),然后想插队普通HTML标签相似,在网页中插入这些组件。React.createClass方法就是用于转移二个组件类,如:
var HelloMessage=React.createClass({
render:function(){
return <h1>Hello {this.props.name}</h1>;
}
});

有关我:winty

图片 9

前端程序猿,前端爱好者。博客: 个人主页 · 小编的篇章 · 1 ·  

图片 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        // ** Our code goes here! **
    </script>
</body>
</html>

下边要上课的拾一个例子在各种 德姆o 子目录,各类目录皆有七个 index.html 文件,在浏览器张开那么些文件(大多数气象下双击就可以卡塔尔,就会立即看出功用。
亟待证实的是,React 能够在浏览器运转,也能够在服务器运营,可是本课程只提到浏览器。一方面是为着尽量保持轻松,其他方面React 的语法是千篇风流倜傥律的,服务器的用法与浏览器差距十分小。德姆o13 是服务器首屏渲染的例子,风乐趣的爱侣能够自身去看源码。
一、HTML 模板
运用 React 的网页源码,结构大意上如下。

ReactDOM.render(<HelloMessage name="John" />,
document.getElementById('example')
)
==>组件的属性能够在组件类的this.props对象上赢得,
举例说name属性就能够通过this.props.name读取补充:this.props.children表示组件的左右子节点;
零器件类的PropTypes属性用来表明组件实例的习性是或不是切合必要
4.赢得真实的DOM节点
构件并非真正的DOM节点,而是存在于内部存款和储蓄器之中的豆蔻梢头种数据结构,叫作虚构DOM(virtual DOM).独有当它插入文档之后才会化为实际的DOM。尤其React的宏图,全部的DOM变动皆早先日设想DOM上发生,然后再将实际发生改换的后生可畏部分,反应在正式DOM上,
这种算法叫作DOM Diff,它能够非常大巩固网页的习性表现
风流倜傥经急需从组件获取真实DOM的节点,要用到ref属性
5.this.state
零器件避免不了和顾客人机联作,React将零零部件看成一个状态机,开首有三个早先状态,然后顾客相互作用,引致意况变化,进而触发重新渲染UI
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven't liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
分析:getInitialState方法用于定义初叶状态,它正是三个目的,这么些指标足以经过this.state属性读取,当喻户点击组件,以致情况变化。this.setState方法就能够改善情形值,每一遍修改未来,自动调用this.render方法,再度渲染组件
补充:
this.props和this.state都用来描述组件的风味,后边三个表示那多少个黄金时代旦定义,就不再改换的表征,而后面一个会趁机客商相互影响而放生变化的特征

下边代码有七个地点供给介怀。首先,最终四个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不匹配。凡是利用 JSX 的地点,都要加上 type="text/babel"

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上边代码有七个地点需求专心。首先,最终一个 <script> 标签的 type 属性为 text/babel 。那是因为 React 独有的 JSX 语法,跟 JavaScript 不匹配。凡是利用 JSX 之处,都要加上 type="text/babel" 。
其次,上边代码大器晚成共用了四个库: react.js 、react-dom.js 和 Browser.js ,它们必得首先加载。在那之中,react.js 是 React 的中坚库,react-dom.js 是提供与 DOM 相关的作用,Browser.js 的职能是将 JSX 语法转为 JavaScript 语法,这一步很耗时,实际上线的时候,应该将它放到服务器完结。

6.组件的生命周期
零构件的生命周期分为八个状态:
Mounting:已插入真实DOM===>Updating:正在被另行渲染===>Unmounting:已移出真实DOMReact为各类景况都提供了七个管理函数,
will函数再步入状态之间调用,did函数再进入状态之后调用,两种情形攻击八种管理函数:
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()React 还提供两种独特别情报形的管理函数:componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState):组件判断是还是不是再次渲染时调用,如:
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

其次,上面代码豆蔻梢头共用了四个库: react.js 、react-dom.js 和 Browser.js ,它们必需首先加载。当中,react.js 是 React 的大旨库,react-dom.js 是提供与 DOM 相关的功力,Browser.js 的功力是将 JSX 语法转为 JavaScript 语法,这一步很耗时,实际上线的时候,应该将它内置服务器完毕。

$ babel src --out-dir build
上边命令能够将 src 子目录的 js 文件举行语法调换,转码后的公文全部坐落 build 子目录。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入内定的 DOM 节点。

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

$ babel src --out-dir build

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
上边代码将八个 h1 标题,插入 example 节点(查看 demo01卡塔 尔(英语:State of Qatar),运转结果如下。

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

地点命令可以将 src 子目录的 js 文件举办语法调换,转码后的文本全体位于 build 子目录。

三、JSX 语法
上风姿洒脱节的代码, HTML 语言直接写在 JavaScript 语言之中,不加任何引号,那正是 JSX 的语法,它同意 HTML 与 JavaScript 的混写(查看 德姆o02 卡塔尔。

ReactDOM.render(
<Hello name="world"/>,
document.body
);
留意style={{opacity:this.state.opacity}},因为朝气蓬勃首要括号表示JavaScript语法,第二主要括号表示样式对象

二、ReactDOM.render()

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render 是 React 的最大旨情势,用于将模板转为 HTML 语言,并插入钦点的 DOM 节点。

ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
地点代码浮现了 JSX 的骨干语法则则:蒙受 HTML 标签(以 < 最初卡塔尔国,就用 HTML 准则分析;蒙受代码块(以 { 最早卡塔尔,就用 JavaScript 准则解析。下面代码的运转结果如下。

ReactDOM.render(

JSX 允许直接在模板插入 JavaScript 变量。若是这些变量是贰个数组,则展销会开那一个数组的具备成员(查看 demo03 卡塔尔。

  <h1>Hello, world!</h1>,

var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
地方代码的arr变量是多少个数组,结果 JSX 会把它的有所成员,增添到模板,运营结果如下。

  document.getElementById('example')

四、组件
React 允许将代码封装成组件(component卡塔尔国,然后像插入普通 HTML 标签同样,在网页中插入那么些组件。React.createClass 方法就用来转移三个组件类(查看 demo04卡塔尔国。

);

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

地方代码将二个 h1 题名,插入 example 节点

ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
下面代码中,变量 HelloMessage 就是二个组件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的三个实例(下文的"组件"都指组件类的实例卡塔 尔(英语:State of Qatar)。全体组件类都一定要有本身的 render 方法,用于出口组件。
瞩目,组件类的首先个假名必得大写,不然会报错,比如HelloMessage不可能写成helloMessage。其余,组件类只可以分包多个顶层标签,否则也会报错。

三、JSX 语法

var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});
地点代码会报错,因为HelloMessage组件包蕴了五个顶层标签:h1和p。
组件的用法与原生的 HTML 标签完全生龙活虎致,能够随意参加属性,比方<HelloMessage name="约翰"> ,正是 HelloMessage 组件参与一个 name 属性,值为 John。组件的属性能够在组件类的 this.props 对象上获得,比方name 属性就能够透过 this.props.name 读取。上边代码的周转结果如下。

上黄金时代节的代码, HTML 语言直接写在 JavaScript 语言之中,不加任何引号,那正是 JSX 的语法,它允许 HTML 与 JavaScript 的混写

加上零零部件属性,有多个地点必要专心,就是 class 属性必要写成 className ,for 属性需求写成 htmlFor ,那是因为 class 和 for 是 JavaScript 的保留字。
五、this.props.children
this.props 对象的品质与组件的质量意气风发大器晚成对应,不过有三个不等,正是this.props.children 属性。它意味着组件的全部子节点(查看 demo05卡塔 尔(英语:State of Qatar)。

var names = ['Alice', 'Emily', 'Kate'];

var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});

ReactDOM.render(

ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
地点代码的 NoteList 组件有多少个 span 子节点,它们都得以通过 this.props.children 读取,运行结果如下。

  <div>

那边要求小心, this.props.children 的值有二种可能:假诺当前组件未有子节点,它便是 undefined ;若是有三个子节点,数据类型是 object ;要是有几个子节点,数据类型就是array 。所以,管理 this.props.children 的时候要小心。
React 提供三个工具方法 React.Children 来管理 this.props.children 。大家得以用 React.Children.map 来遍历子节点,而不用顾忌this.props.children 的数据类型是 undefined 仍然 object。更加多的 React.Children 的章程,请参见官方文书档案。
六、PropTypes
构件的属性能够承当任性值,字符串、对象、函数等等都得以。临时,大家需求意气风发种体制,验证别人接受组件时,提供的参数是还是不是符合须要。
组件类的PropTypes属性,就是用来证实组件实例的习性是或不是切合供给(查看 demo06卡塔尔国。

  {

var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},

    names.map(function (name) {

render: function() {
return <h1> {this.props.title} </h1>;
}
});
上边的Mytitle组件有二个title属性。PropTypes 告诉 React,那个 title 属性是必得的,並且它的值必需是字符串。将来,咱们设置 title 属性的值是三个数值。

      return <div>Hello, {name}!</div>

var data = 123;

    })

ReactDOM.render(
<MyTitle title={data} />,
document.body
);
那样一来,title属性就通然则验证了。调控台会呈现生龙活虎行错误音信。

  }

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
更加多的PropTypes设置,能够查阅官方文书档案。
除此以外,getDefaultProps 方法能够用来设置组件属性的默许值。

  </div>,

var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},

  document.getElementById('example')

render: function() {
return <h1> {this.props.title} </h1>;
}
});

);

ReactDOM.render(
<MyTitle />,
document.body
);
地点代码会输出"Hello World"。
七、获取真实的DOM节点
构件并非真性的 DOM 节点,而是存在于内存之中的生机勃勃种数据结构,叫做设想DOM (virtual DOM卡塔尔。唯有当它插入文书档案以往,才会化为实际的 DOM 。按照React 的规划,全体的 DOM 变动,都先在虚构 DOM 上产生,然后再将实际产生更动的部分,反映在实际 DOM上,这种算法叫做 DOM diff ,它能够非常大进步网页的脾气表现。
然则,有的时候须求从组件获取真实 DOM 的节点,那时候将要用到 ref 属性(查看 demo07 卡塔 尔(英语:State of Qatar)。

地点代码展现了 JSX 的中坚语法法则:碰到 HTML 标签(以 < 开端卡塔 尔(英语:State of Qatar),就用 HTML 法则深入解析;境遇代码块(以 { 初阶卡塔尔,就用 JavaScript 法规深入剖判。

var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});

JSX 允许直接在模板插入 JavaScript 变量。如若那几个变量是三个数组,则会展开这几个数组的持有成员。

ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
上边代码中,组件 MyComponent 的子节点有二个文书输入框,用于获取客商的输入。那个时候就必得获得真实的 DOM 节点,虚构 DOM 是拿不到顾客输入的。为了完结那点,文本输入框必得有叁个ref 属性,然后 this.refs.[refName] 就能够回来那几个实在的 DOM 节点。
内需潜心的是,由于 this.refs.[refName] 属性获取的是真正 DOM ,所以必得等到设想 DOM 插入文书档案现在,手艺应用那天性子,不然会报错。上边代码中,通过为组件内定Click 事件的回调函数,确定保障了唯有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。
React 组件辅助广大风浪,除了 Click 事件以外,还应该有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文书档案。
八、this.state
零部件免不了要与顾客相互影响,React 的一大改良,正是将零器件看成是四个状态机,意气风发初阶有几个开端状态,然后客商相互影响,导致景况变化,进而触发重新渲染 UI (查看 demo08 卡塔 尔(阿拉伯语:قطر‎。

var arr = [

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven't liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

  <h1>Hello world!</h1>,

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
上面代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义最早状态,也正是三个指标,这么些目的能够通过 this.state 属性读取。当客户点击组件,诱致敬况变化,this.setState 方法就改进意况值,每便修正现在,自动调用 this.render 方法,再度渲染组件。
由于 this.props 和 this.state 都用来描述组件的特点,或许会发出模糊。一个简短的分别方法是,this.props 表示那么些后生可畏旦定义,就不再改换的风味,而 this.state 是会随着客户相互作用而发生变化的表征。
九、表单
顾客在表单填入的剧情,属于客户跟组件的相互,所以不能够用 this.props 读取(查看 demo9 卡塔 尔(英语:State of Qatar)。

  <h2>React is awesome</h2>,

var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});

];

ReactDOM.render(<Input/>, document.body);
上面代码中,文本输入框的值,不能够用 this.props.value 读取,而要定义三个onChange 事件的回调函数,通过 event.target.value 读取顾客输入的值。textarea 成分、select成分、radio成分都归属这种情景,越来越多介绍请参见官方文书档案。
十、组件的生命周期
零部件的生命周期分成四个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
React 为每一个景况都提供了三种管理函数,will 函数在踏入状态在此之前调用,did 函数在步入状态之后调用,两种情景共计多种管理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
其余,React 还提供三种独特情状的管理函数。
component威尔ReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判定是或不是再次渲染时调用
那么些措施的详实说明,能够参照官方文书档案。上面是一个例证(查看 demo10 卡塔尔。

ReactDOM.render(

var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

  <div>{arr}</div>,

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

  document.getElementById('example')

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

);

ReactDOM.render(
<Hello name="world"/>,
document.body
);
地点代码在hello组件加载以后,通过 componentDidMount 方法设置多少个沙漏,每间距100飞秒,就再一次安装组件的折射率,进而引发重新渲染。
除此以外,组件的style属性的安装情势也值得注意,不可能写成

上边代码的arr变量是二个数组,结果 JSX 会把它的全部成员,增添到模板

style="opacity:{this.state.opacity};"
而要写成

四、组件

style={{opacity: this.state.opacity}}
那是因为 React 组件样式是三个对象,所以首先重点括号表示那是 JavaScript 语法,第二根本括号表示样式对象。
十一、Ajax
零部件的多寡来自,平日是由此 Ajax 央浼从服务器获取,能够采纳componentDidMount 方法设置 Ajax 央求,等到央求成功,再用 this.setState 方法重复渲染 UI (查看 demo11 卡塔尔国。

React 允许将代码封装成组件(component卡塔 尔(阿拉伯语:قطر‎,然后像插入普通 HTML 标签相通,在网页中插入这些组件。React.createClass 方法就用于转移叁个组件类。

var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},

var HelloMessage = React.createClass({

componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},

  render: function() {

render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});

    return <h1>Hello {this.props.name}</h1>;

ReactDOM.render(
<UserGist source="" />,
document.body
);
地点代码应用 jQuery 完毕 Ajax 哀告,那是为着便于表达。React 本人并未有任何依据,完全可以不要jQuery,而使用别的库。
咱俩竟然能够把多个Promise对象传入组件,请看德姆o12。

  }

ReactDOM.render(
<RepoList
promise={$.getJSON('
/>,
document.body
);
上边代码从Github的API抓取数据,然后将Promise对象作为品质,传给RepoList组件。
万意气风发Promise对象正在抓取数据(pending状态卡塔 尔(英语:State of Qatar),组件彰显"正在加载";借使Promise对象报错(rejected状态卡塔尔国,组件呈现报错音讯;如若Promise对象抓取多少成功(fulfilled状态卡塔尔国,组件展现获取的数据。

});

var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
},

ReactDOM.render(

componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
},

  <HelloMessage name="John" />,

render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
十八、仿效链接
React's official site
React's official examples
React (Virtual) DOM Terminology, by Sebastian Markbåge
The React Quick Start Guide, by Jack Callister
Learning React.js: Getting Started and Concepts, by Ken Wheeler
Getting started with React, by Ryan Clark
React JS Tutorial and Guide to the Gotchas, by Justin Deal
React Primer, by Binary Muse
jQuery versus React.js thinking, by zigomir

  document.getElementById('example')

);

上面代码中,变量 HelloMessage 就是三个零器件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的多个实例(下文的"组件"都指组件类的实例卡塔尔。全部组件类都必需有投机的 render 方法,用于出口组件。

瞩目,组件类的首先个字母必需大写,不然会报错,譬如HelloMessage不可能写成helloMessage。其它,组件类只好分包三个顶层标签,不然也会报错。

var HelloMessage = React.createClass({

  render: function() {

    return <h1>

      Hello {this.props.name}

    </h1><p>

      some text

    </p>;

  }

});

地点代码会报错,因为HelloMessage组件包含了八个顶层标签:h1和p。

组件的用法与原生的 HTML 标签完全大器晚成致,能够大肆参预属性,举个例子 <HelloMessage name="约翰"> ,正是 HelloMessage 组件参预二个 name 属性,值为 John。组件的属性能够在组件类的 this.props 对象上赢得,比方 name 属性就足以经过 this.props.name 读取。

增多零器件属性,有三个地点须求专一,正是 class 属性需求写成 className ,for 属性须求写成 htmlFor ,那是因为 class 和 for 是 JavaScript 的保留字。

五、this.props.children

this.props 对象的性质与组件的习性大器晚成后生可畏对应,然则有二个两样,便是 this.props.children 属性。它代表组件的全体子节点。

var NotesList = React.createClass({

  render: function() {

    return (

      <ol>

      {

        React.Children.map(this.props.children, function (child) {

          return <li>{child}</li>;

        })

      }

      </ol>

    );

  }

});

 

ReactDOM.render(

  <NotesList>

    <span>hello</span>

    <span>world</span>

  </NotesList>,

  document.body

);

上边代码的 NoteList 组件有七个 span 子节点,它们都能够因而 this.props.children 读取

此地必要注意, this.props.children 的值有三种恐怕:如若当前组件未有子节点,它便是 undefined ;假使有二个子节点,数据类型是 object ;借使有三个子节点,数据类型正是 array 。所以,管理 this.props.children 的时候要小心。

React 提供多个工具方法 React.Children 来处理 this.props.children 。大家得以用 React.Children.map 来遍历子节点,而不用忧郁 this.props.children 的数据类型是 undefined 照旧 object。越多的 React.Children 的方式,请参谋合土耳其(Turkey卡塔 尔(阿拉伯语:قطر‎语档。

六、PropTypes

构件的性情可以接纳任性值,字符串、对象、函数等等都足以。不常,我们须求风姿浪漫种体制,验证外人利用组件时,提供的参数是不是相符供给。

零构件类的PropTypes属性,正是用来表明组件实例的品质是不是适合须求。

var MyTitle = React.createClass({

  propTypes: {

    title: React.PropTypes.string.isRequired,

  },

  render: function() {

     return <h1> {this.props.title} </h1>;

   }

});

地点的Mytitle组件有三个title属性。PropTypes 告诉 React,这一个 title 属性是必需的,而且它的值必须是字符串。未来,大家设置 title 属性的值是一个数值。

var data = 123;

ReactDOM.render(

  <MyTitle title={data} />,

  document.body

);

那样一来,title属性就通可是验证了。调节台会显示少年老成行错误音讯。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

愈来愈多的PropTypes设置,能够查看合拉脱维亚语档。

除此以外,getDefaultProps 方法能够用来安装组件属性的暗中认可值。

var MyTitle = React.createClass({

  getDefaultProps : function () {

    return {

      title : 'Hello World'

    };

  },

  render: function() {

     return <h1> {this.props.title} </h1>;

   }

});

ReactDOM.render(

  <MyTitle />,

  document.body

);

下边代码会输出"Hello World"。

七、获取真实的DOM节点

零器件并非动真格的的 DOM 节点,而是存在于内部存款和储蓄器之中的生龙活虎种数据结构,叫做虚构DOM (virtual DOM卡塔 尔(阿拉伯语:قطر‎。独有当它插入文书档案以往,才会变成实际的 DOM 。根据React 的筹算,全数的 DOM 变动,都先在设想 DOM 上产生,然后再将实际产生变动的有的,反映在安分守己 DOM上,这种算法叫做 DOM diff ,它能够大幅加强网页的性质表现。

不过,不常供给从组件获取真实 DOM 的节点,当时就要用到 ref 属性。

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

  },

  render: function() {

    return (

      <div>

        <input type="text" ref="myTextInput" />

        <input type="button" value="Focus the text input" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

上面代码中,组件 MyComponent 的子节点有二个文书输入框,用于获取客户的输入。当时就必须获得真实的 DOM 节点,设想 DOM 是拿不到客商输入的。为了实现那点,文本输入框必需有一个 ref 属性,然后 this.refs.[refName] 就能够回来那些实在的 DOM 节点。

内需专注的是,由于 this.refs.[refName] 属性获取的是真正 DOM ,所以必需等到设想 DOM 插入文书档案未来,手艺选拔那么些天性,不然会报错。上面代码中,通过为组件内定 Click 事件的回调函数,确认保证了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

React 组件协助广大风浪,除了 Click 事件以外,还会有 KeyDown 、Copy、Scroll 等,完整的事件事项清单请查看合藏语档。

八、this.state

组件免不了要与客商相互作用,React 的第一次全国代表大会改过,正是将构件看成是八个状态机,风华正茂早先有一个始发状态,然后客商相互影响,引致景况变化,进而触发重新渲染 UI。

var LikeButton = React.createClass({

  getInitialState: function() {

    return {liked: false};

  },

  handleClick: function(event) {

    this.setState({liked: !this.state.liked});

  },

  render: function() {

    var text = this.state.liked ? 'like' : 'haven't liked';

    return (

      <p onClick={this.handleClick}>

        You {text} this. Click to toggle.

      </p>

    );

  }

});

ReactDOM.render(

  <LikeButton />,

  document.getElementById('example')

);

地点代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义开头状态,也正是三个对象,那个指标足以经过 this.state 属性读取。当顾客点击组件,引致情形变化,this.setState 方法就校勘情形值,每一遍更改之后,自动调用 this.render 方法,再度渲染组件。

鉴于 this.props 和 this.state 都用于描述组件的特点,或者会生出模糊。一个简易的界别方法是,this.props 表示那多少个生机勃勃旦定义,就不再改换的风味,而 this.state 是会趁机用户相互作用而产生变化的表征。

九、表单

客商在表单填入的内容,归属客户跟组件的相互,所以不能够用 this.props 读取。

var Input = React.createClass({

  getInitialState: function() {

    return {value: 'Hello!'};

  },

  handleChange: function(event) {

    this.setState({value: event.target.value});

  },

  render: function () {

    var value = this.state.value;

    return (

      <div>

        <input type="text" value={value} onChange={this.handleChange} />

        <p>{value}</p>

      </div>

    );

  }

});

 

ReactDOM.render(<Input/>, document.body);

上边代码中,文本输入框的值,不能用 this.props.value 读取,而要定义叁个 onChange 事件的回调函数,通过 event.target.value 读取客商输入的值。textarea 成分、select成分、radio元素都归属这种景观,越来越多介绍请参见合法语档。

十、组件的生命周期

组件的生命周期分成四个情景:

Mounting:已插入真实 DOM

Updating:正在被重复渲染

Unmounting:已移出真实 DOM

React 为各样情状都提供了三种管理函数,will 函数在步向状态在此之前调用,did 函数在进入状态之后调用,三种情景共计各样管理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

除此以外,React 还提供三种特有情况的管理函数。

componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState):组件判定是不是再度渲染时调用

那几个主意的详实表达,能够参照合匈牙利语档。上边是叁个例证。

var Hello = React.createClass({

  getInitialState: function () {

    return {

      opacity: 1.0

    };

  },

 

  componentDidMount: function () {

    this.timer = setInterval(function () {

      var opacity = this.state.opacity;

      opacity -= .05;

      if (opacity < 0.1) {

        opacity = 1.0;

      }

      this.setState({

        opacity: opacity

      });

    }.bind(this), 100);

  },

 

  render: function () {

    return (

      <div style={{opacity: this.state.opacity}}>

        Hello {this.props.name}

      </div>

    );

  }

});

 

ReactDOM.render(

  <Hello name="world"/>,

  document.body

);

地方代码在hello组件加载现在,通过 componentDidMount 方法设置一个反应计时器,每间距100飞秒,就再也设置组件的折射率,进而抓住重新渲染。

除此以外,组件的style属性的设置形式也值得注意,无法写成

style="opacity:{this.state.opacity};"

而要写成

style={{opacity: this.state.opacity}}

那是因为 React 组件样式是二个对象,所以首先至关心重视要括号表示那是 JavaScript 语法,第二尤为重要括号表示样式对象。

十一、Ajax

组件的数额来自,平日是透过 Ajax 诉求从服务器获取,可以选择 componentDidMount 方法设置 Ajax 央浼,等到央求成功,再用 this.setState 方法重新渲染 UI。

var UserGist = React.createClass({

  getInitialState: function() {

    return {

      username: '',

      lastGistUrl: ''

    };

  },

  componentDidMount: function() {

    $.get(this.props.source, function(result) {

      var lastGist = result[0];

      if (this.isMounted()) {

        this.setState({

          username: lastGist.owner.login,

          lastGistUrl: lastGist.html_url

        });

      }

    }.bind(this));

  },

 

  render: function() {

    return (

      <div>

        {this.state.username}'s last gist is

        <a href={this.state.lastGistUrl}>here</a>.

      </div>

    );

  }

});

 

ReactDOM.render(

  <UserGist source="" />,

  document.body

);

上面代码应用 jQuery 完结 Ajax 须要,那是为了方便表达。React 本人未有别的依靠,完全能够毫不jQuery,而采纳任何库。

笔者们以致能够把二个Promise对象传入组件

ReactDOM.render(

  <RepoList

promise={$.getJSON('?q=javascript&sort=stars')}

  />,

  document.body

);

下边代码从Github的API抓取数据,然后将Promise对象作为品质,传给RepoList组件。

风姿罗曼蒂克旦Promise对象正在抓取数据(pending状态卡塔 尔(英语:State of Qatar),组件呈现"正在加载";若是Promise对象报错(rejected状态卡塔 尔(阿拉伯语:قطر‎,组件突显报错音信;假若Promise对象抓取多少成功(fulfilled状态卡塔尔国,组件显示获取的数码。

var RepoList = React.createClass({

  getInitialState: function() {

    return { loading: true, error: null, data: null};

  },

  componentDidMount() {

    this.props.promise.then(

      value => this.setState({loading: false, data: value}),

      error => this.setState({loading: false, error: error}));

  },

  render: function() {

    if (this.state.loading) {

      return <span>Loading...</span>;

    }

    else if (this.state.error !== null) {

      return <span>Error: {this.state.error.message}</span>;

    }

    else {

      var repos = this.state.data.items;

      var repoList = repos.map(function (repo) {

        return (

          <li>

            <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}

          </li>

        );

      });

      return (

        <main>

          <h1>Most Popular JavaScript Projects in Github</h1>

          <ol>{repoList}</ol>

        </main>

      );

    }

  }

});

最后

因为ReactJS的大名一向赫赫有名,所以便花了些时间驾驭一下。原来感到只是简单的分歧于JQuery的卷入,但事实上却是完全打破了以前HTML开采的情势。
从利用HTML属性到HTML和CSS分离,再到JavaScript管理逻辑,用了非常长的时光。现在比很少见到杂糅着种种语言的页面代码。
就此,最初见到ReactJs代码的时候,简直不敢相信眼睛,这么多年分其余结果,又实地地杂糅到了协同。
前景前端明显会有越来越好的样子和升华,但相对不会是ReactJS。

自己是Vue的死忠粉,脑残粉。

本文由pc28.am发布于前端技术,转载请注明出处:REACT火速入门,js深入学习详细深入分析

上一篇:速度最高可进级98,Webpack学习笔记 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • REACT火速入门,js深入学习详细深入分析
    REACT火速入门,js深入学习详细深入分析
    React.js浓郁学习详细解析 2016/07/16 · JavaScript· ReactJS 本文小编: 伯乐在线 -winty。未经我许可,防止转发! 招待参与伯乐在线 专辑我。 今日,继续浓烈学习
  • 遇见未知的,web开采连忙入门
    遇见未知的,web开采连忙入门
    CSS 框架 Bulma 教程 2017/10/26 · CSS ·Bulma 原文出处:阮一峰    网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS框架,
  • 追踪客户,读书笔记
    追踪客户,读书笔记
    使用 CSS 追踪用户 2018/01/20 · CSS · 1评论 ·追踪 原文出处:jbtronics   译文出处:枫上雾棋    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行
  • pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    CSS技巧:逐帧动漫抖动实施方案 2017/08/16 · CSS ·动画 原来的书文出处:坑坑洼洼实验室    我所在的前端共青团和少先队首要从事活动端的H5页面开荒,而
  • 跟随我在oracle学习php,HTML中form表单的用法
    跟随我在oracle学习php,HTML中form表单的用法
    表单元素之搭车系 2016/01/28 · HTML5 ·表单 原文出处:司徒正美(@司徒正美)    对于表单元素, 除了reset元素,只要有name与value都能提交 因为在我们印象