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。

②特点

壹 、成分名首字母大写

二 、符合嵌套规则

叁 、可以写入求值表达式

四 、驼峰式命名

伍 、无法使用javascript原生函数的局地首要词,如for和class。供给替换来htmlFor和className

③选拔办法

① 、使用动态值: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:是三个可选的唯一标识符,通过给组件设置三个满世界无双的键,并保险它在3个渲染周期中保持一致,使得React能够更只可以地操纵应该录取三个零部件依旧销毁并重建八个零件,进而进步渲染质量。例如:

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:获取私下认可属性,只调用3遍,是在createClass之后调用的。实例之间共享引用

②getInitialState:开头化每一种实例的故意伊始化状态

③component威尔Mount:mout正是装载的情趣,这么些方式的情趣乃是组件即将棉被服装载到页面中,也是render在此之前最后3回修改意况的机遇

④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

运行中阶段:

①component威尔ReceiveProps:这几个函数在组件即将接受到属性时接触的,或然是父组件的性质爆发变化时,属性在传递到零部件之前,开发者有空子通过那个函数去处理属性。比如修改,更新内部景况等。

②shouldComponentUpdate:当组件接收到新属性只怕新景观的时候接触的。这些是1个疑团函数,也正是说大家能够告诉react不去革新有个别组件。因为有时候属性或许状态并不会招致组件产生更新。在组件不需求立异的气象下,手动使shouldComponentUpdate再次回到false,那样react就不必要再通过render和diff算法去判断是还是不是要更新,从而增强品质。

③component威尔Update:render触发之前接触,更新组件,不可能修改属性和状态

④render:组件在render函数生成虚拟节点,最终由react将虚拟节点变成真的的节点渲染到页面上,只可以访问this.props和this.state,唯有三个顶层组件,最好不要涂改情状和DOM输出。

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

备注:那多少个函数的施行顺序也是从上到下的。那几个的测试代码已上传至:

销毁阶段:

①component威尔Unmount:这些函数在销毁操作真正履行以前调用,给开发者最终的时机实行局地清理工作。

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

脾气的意义:

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}/>   变量

贰 、展开定义(个人认为便是对象式定义)

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()函数(差不离不用)

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

事件目的介绍

行使方法:就算在编辑事件目标处理函数的时候,添加2个参数。获得这几个目的之后,就透过对象的本性来能够博得一些音信。

例如:

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=”comment博克斯”> <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:也正是能够把相同的代码抽象出来,封装成3个函数,然后再调用。

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这1个框架正是分化的,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引领现在的用户界面开发框架》

极客大学录制课程

打赏扶助自个儿写出更加多好小说,感激!

打赏小编

*通过createElement成立成分 HELLO Word

一、HTML 模板

零、安装
React 的安装包,可以到官网下载。不过,React 德姆os 已经自带 React
源码,不用其它安装,只需把那个库拷贝到您的硬盘就行了。

打赏协理本人写出越来越多好作品,多谢!

任选一种支付格局

澳门葡京 7
澳门葡京 8

1 赞 3 收藏
评论

var el=React.createElement(type,[props],[children…]) 标签 属性
内容
React.render(el,document.getElementById(“…”))

应用 React 的网页源码,结构大体上如下。

$ git clone git@github.com:ruanyf/react-demos.git
比方你没安装 git, 那就平昔下载 zip 压缩包。

关于小编:winty

澳门葡京 9

前者工程师,前端爱好者。博客:

个人主页 ·
笔者的篇章 ·
1 ·
 

澳门葡京 10

*虚拟DOM

<!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>

上边要上课的13个例证在挨家挨户 德姆o 子目录,每一个目录都有八个 index.html
文件,在浏览器打开这些文件(当先三分一状态下双击即可),就能霎时看出效果。
亟需注明的是,React
能够在浏览器启动,也得以在服务器运维,可是本学科只提到浏览器。一方面是为了尽或然保证不难,另一方面
React 的语法是一律的,服务器的用法与浏览器差距一点都不大。德姆o13
是服务器首屏渲染的例子,有趣味的对象能够协调去看源码。
一、HTML 模板
行使 React 的网页源码,结构大体上如下。

在虚拟DOM上操作 通过render来挂载到实在的DOM
组件
React.createClass(meta)
个中要求render函数

上边代码有多个位置须要专注。首先,最终二个 <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>
地点代码有多个地方要求注意。首先,最后3个 <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
语法,这一步很耗时,实际上线的时候,应该将它放到服务器达成。

*JSX

说不上,上面代码一共用了八个库: 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 节点。

JSX是对JavaScript语法的扩张,它让大家得以在JavaScript代码中以看似HTML
的措施开创React成分。
var Jsxdemo=React.createClass({
render:function(){
var html=<div>
<div className=”ez-led”>Hello, React!</div>
<div className=”ez-led”>2015-04-15</div>
<div className=”ez-led”>作者是第1排</div>
</div>;
return html;
}
JSX 能让大家像是拼写字符串一样去写HTML、

$ babel src –out-dir build

REACT急速入门,js深刻学习详细剖析。ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example’)
);
地点代码将一个 h1 题名,插入 example 节点(查看 demo01),运营结果如下。

*props

上边命令能够将 src 子目录的 js 文件举行语法转换,转码后的文书全部位居 build 子目录。

三、JSX 语法
上一节的代码, HTML 语言间接写在 JavaScript
语言之中,不加任何引号,那便是 JSX 的语法,它同意 HTML 与 JavaScript
的混写(查看 德姆o02 )。

props 称之为 无状态组件 组件的变现都以通过外部传入的props属性
依据自身的气象来做出分裂的反响
var Jsxdemo=React.createClass({
render:function(){
var number=this.props.setid;
alert(number); 这里能一向出口对象里的方块字
var style={
“color”:”red”,
“fontSize”:”12px”//那里是讲求内联样式需求依据驼峰写法去写
}
var html=<div>
<div className=”ez-led” style={style}>Hello, React!</div>
<div className=”ez-led”>2015-04-15</div>
<div className=”ez-led”>笔者是第一排</div>
</div>;
return html;
}
});

二、ReactDOM.render()

var names = [‘Alice’, ‘Emily’, ‘Kate’];

    ReactDOM.render(<Jsxdemo setid="11"/>,document.getElementById("jsxdemobox"));

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
)。

var Jsxdemo=React.createClass({
render:function(){
var style={
“color”:”red”,
“fontSize”:”12px”//那里是需求内联样式须要根据驼峰写法去写
}
var html=<div>
<div className=”ez-led” style={style}>Hello, React!</div>
<div className=”ez-led”>2015-04-15</div>
<div className=”ez-led”>小编是第③排</div>
</div>;
return html;
}
});

  <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
会把它的具有成员,添加到模板,运营结果如下。

*state 状态机

  document.getElementById(‘example’)

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

state – 组件的情事变量
保存组件的脚下情况,能够再任什么时候候经过this.state来博取到日前事态
getInitialState() – 设置组件起初状态
setState(currentState) – 设置组件当前景观 会重新渲染
//getInitialState方法来安装早先化状态 也正是安装大家的 state {key:value}
其中key代表state指向的状态变量 value代表情形
getInitialState : function(){
return {open : true};
},
//那里是由此贰个点击事件来重新设定意况机
必须求通过this.setState({option:!this.state.open})
意思便是设置状态机的另一种状态
onClick : function(){
//读取仁同一视设状态,那将触发重新渲染
this.setState({open : !this.state.open});
},
//在render来操控我们的虚构DOM 记得return HTML代码
render : function(){
//依照气象设置样式
img = this.state.open ? “img/switch-on.png” : img =
“img/switch-off.png”;

);

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

            //返回元素
            return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>;
        }

上边代码将1个 h1 标题,插入 example 节点

ReactDOM.render(
<HelloMessage name=”John” />,
document.getElementById(‘example’)
);
上边代码中,变量 HelloMessage 就是3个零件类。模板插入 <HelloMessage
/> 时,会自动生成 HelloMessage
的1个实例(下文的”组件”都指组件类的实例)。全部组件类都必须有协调的
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 读取。下边代码的运作结果如下。

component威尔Mount() – 组件实例即将挂接(初次渲染)时被调用
其一办法在一切生命周期中只会被调用三回。
componentDidMount() – 组件实例挂接(初次渲染)后被调用
那个方法在全方位生命周期中只会被调用2回。
component威尔ReceiveProps(nextProps) – 组件实例即将安装新属性时被调用
参数nextProps表示将要应用到零部件实例上的新属性值。
以此办法在第贰渲染时不会被调用。在此方式内调用setState()不会唤起重新渲染。
shouldComponentUpdate(nextProps, nextState) –
组件实例即将再次渲染时被调用
参数nextProps传入即将应用到零部件实例上的新属性值,参数nextState传入组件实例即将被
设置的境况值。要是这么些格局重回false,那么组件实例就不会被重复渲染。除非大家肯定地
知道,新的品质和气象不须要开始展览重复渲染,不然那么些点子都应有回到true。
本条格局在首先渲染时或通过forceUpdate()方法开始展览渲染时不会被调用。
component威尔Update(nextProps, nextState) –
组件实例即将重新渲染时被调用
本条格局在第②渲染时不会被调用。注意:不可能在此办法内调用setState()。
componentDidUpdate(prevProps, prevState) – 组件实例重新渲染后被调用
本条格局在初次渲染时不会被调用。
component威尔Unmount() – 组件实例即将从DOM树移除时被调用
其一措施在全体生命周期中只会被调用三回。

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

拉长零件属性,有3个地点要求小心,正是 class 属性必要写成 className
,for 属性须要写成 htmlFor ,那是因为 class 和 for 是 JavaScript
的保留字。
五、this.props.children
this.props 对象的性子与组件的属性一一对应,然而有1个不比,就是this.props.children 属性。它代表组件的全数子节点(查看 demo05)。

(访问DOM v0.14 版中 refs 指向的便是 DOM 节点,同时也会保留 .getDOMNode()
方法(带 warning),最后在 v0.15 版中去除该措施。)
率先要给您想取得DOM对象设定 ref=“q” ref 必须是全局唯一的
var el = React.findDOMNode(this.refs.q),
this.refs.q获取到的是虚拟DOM,在render方法执行之后,并且react已经做到了DOM的更新,才能通过
this.refs.city.getDOMNode() 来得到原生的DOM成分。
运用 this.refs.xxx.getDOMNode() 或React.findDOMNode(this.refs.xxx)
能够获取到真正的 DOM 节点。

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>
);
}
});

// 之前:
// var input = this.refs.giraffe.getDOMNode();
//
// v0.14 版:0.15版本之后
var input = this.refs.giraffe;
alert(input.value);

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 提供2个工具方法 React.Children 来拍卖 this.props.children
。大家能够用 React.Children.map 来遍历子节点,而不用担心
this.props.children 的数据类型是 undefined 依旧 object。越多的
React.Children 的法门,请参考官方文书档案。
六、PropTypes
组件的性质还行任意值,字符串、对象、函数等等都足以。有时,我们必要一种体制,验证别人使用组件时,提供的参数是不是符合供给。
零件类的PropTypes属性,正是用来注脚组件实例的属性是不是符合须要(查看
demo06)。

文本输入框
毫不使用value属性设置文本输入框成分的初值,应当采取defaultValue:
//JSX
<input type =”text” defaultValue =”demo”/>
复选按钮
不要采用checked属性设置复选按钮的发端选中状态,应当选取defaultChecked:
//JSX
<input type =”checkbox” defaultChecked/>
单选按钮组
毫无选用option成分的selected属性设置单选按钮组的开始选中状态,应当利用
select成分的defaultValue:
//JSX
<select defaultValue=”A”>
<option value=”A”>China</option>
<option value=”B”>India</option>
<option value=”C”>Japan</option>
</select>

  {

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
属性的值是多少个数值。

在ReactDOM.render里面 ,组件要成双标签
{this.props.children}用于获取到大家的React的 子成分

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

var data = 123;

ReactDOM.render(<Jsxdemo
setid=”11″>作者是容器组件</Jsxdemo>,document.getElementById(“jsxdemobox”));
var Jsxdemo=React.createClass({
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
“color”:”red”,
“fontSize”:”12px”//这里是讲求内联样式供给服从驼峰写法去写
}
var html=<div>
<div className=”ez-led”
style={style}>{this.props.children}</div>
<div className=”ez-led” ref=”aaaa”>2015-04-15</div>
<input type=”text” className=”ez-led” ref=”bbbb”
defaultValue=”我是第①排”/>
</div>;
return html;
}
});

    })

ReactDOM.render(
<MyTitle title={data} />,
document.body
);
那样一来,title属性就通可是验证了。控制台会展现一行错误消息。

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));

  }

Warning: Failed propType: Invalid prop `title` of type `number`
supplied to `MyTitle`, expected `string`.
越多的PropTypes设置,可以查阅官方文书档案。
别的,getDefaultProps 方法能够用来设置组件属性的暗中认可值。

*JSX可开始展览属性

  </div>,

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

大家得以再render里面

  document.getElementById(‘example’)

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

<div className=”ez-slider” onMouseDown ={this.onMouseDown}
onMouseMove ={this.onMouseMove} onMouseUp ={this.onMouseUp}/>
相等于
var props ={
className :”ez-slider”,
onMouseDown :this.onMouseDown,
onMouseUp :this.onMouseUp,
onMouseMove :this.onMouseMove
};

);

ReactDOM.render(
<MyTitle />,
document.body
);
地点代码会输出”Hello World”。
七 、获取真实的DOM节点
组件并不是动真格的的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟
DOM (virtual DOM)。唯有当它插入文书档案以往,才会成为实际的 DOM 。根据React 的陈设,全体的 DOM 变动,都先在编造 DOM
上发出,然后再将实际发生转移的部分,反映在真实 DOM上,那种算法叫做 DOM
diff ,它可以极大增强网页的习性表现。
唯独,有时需求从组件获取真实 DOM 的节点,那时就要用到 ref 属性(查看
demo07 )。

//传入属性包
var rel =<div {…props}></div>;

上面代码呈现了 JSX 的着力语法规则:境遇 HTML 标签(以 < 先河),就用
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>
);
}
});

var Jsxdemo=React.createClass({
// getInitialState:function(){

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 )。

        // },
        componentDidMount:function(){
            var message=this.refs.bbbb;
            // alert(message.value);
        },
        onClick:function(){
            alert(0);
        },
        render:function(){
            var number=this.props.setid;
            // alert(number);
            var style={
                "color":"red",
                "fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
            }
            var options={
                className:"ez-led",
                onClick:this.onClick
            }
            var newhtml=<div {...options}>22222</div>;
            return newhtml;
        }
    });

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));

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>
);
}
});

卡通 CSS3 transition 思路便是运用状态机来判断 DOM状态
为成分注解transition样式
安装属性初叶值,第叁次渲染成分
安装属性目的值,第1回渲染成分

  <h1>Hello world!</h1>,

ReactDOM.render(
<LikeButton />,
document.getElementById(‘example’)
);
地方代码是八个 LikeButton 组件,它的 getInitialState
方法用于定义初叶状态,约等于三个目的,这么些目的能够通过 this.state
属性读取。当用户点击组件,导致意况变化,this.setState
方法就修改境况值,每一次修改之后,自动调用 this.render
方法,再度渲染组件。
是因为 this.props 和 this.state
都用于描述组件的特色,可能会产生模糊。1个简短的分别方法是,this.props
表示那一个一旦定义,就不再改变的性状,而 this.state
是会趁机用户互动而产生变化的特点。
九、表单
用户在表单填入的情节,属于用户跟组件的互相,所以无法用 this.props
读取(查看 demo9 )。

*暗中同意属性

  <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>
);
}
});

getDefaultProps:是设置暗许属性 郎窑红为相关代码
若是设置了value 则 弹出 10 假若没有设置 则 弹出 20

];

ReactDOM.render(<Input/>, document.body);
地方代码中,文本输入框的值,无法用 this.props.value 读取,而要定义一个onChange 事件的回调函数,通过 event.target.value
读取用户输入的值。textarea
成分、select成分、radio成分都属于那种景色,越来越多介绍请参见官方文书档案。
10、组件的生命周期
组件的生命周期分成四个景况:
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 )。

var ZZ=React.createClass({
    getDefaultProps:function(){
        return {
            value:20
        }
    },
    onClick:function(){
        alert(0);
    },
    render:function(){
        alert(this.props.value);
        var option={
            className:"maincsss",
            onClick:this.onClick
        }
        var html=<div {...option}>111111</div>;
        return html;    
    }
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));

mixin复用代码      meisen发音  混合柔和的意思  专门用来写公共模块的对象 并且通过minxins指向您的 mixin对象 来拷贝你的React组件中

ReactDOM.render(

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

varEzLoggerMixin={
log:function(){
//sth. happened here.
}
};
React.createClass({
mixins:[EzLoggerMixin],
render:function(){
//your render stuff.
}
});

  <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);
},

//mixin正是存放公共能力的3个大约的靶子而已。首字母可十分小写
不过为了养成习惯 首字母依然大写的好 哦
var Minxintext={
log:function(){
alert(“我是mixin”);
}
};
mixins : [Minxintext],
接下来在React实例之中的生命周期恐怕事件函数里面 通过 this.
你定义的mixin对象内部的函数

  document.getElementById(‘example’)

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

var Minxintext={
log:function(){
alert(“我是mixin”);
}
};
var ZZ=React.createClass({
mixins : [Minxintext],
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
this.log();
澳门葡京 ,},
render:function(){
// alert(this.props.value);
var option={
className:”maincsss”,
onClick:this.onClick
}
var html=<div {…option}>111111</div>;
return html;
}
});
ReactDOM.render(<ZZ
value=”10″/>,document.getElementById(“mainbox”));

);

ReactDOM.render(
<Hello name=”world”/>,
document.body
);
地点代码在hello组件加载今后,通过 componentDidMount
方法设置3个定时器,每隔100纳秒,就再度设置组件的折射率,从而吸引重新渲染。
除此以外,组件的style属性的安装方法也值得注意,不能够写成

map 循环

地方代码的arr变量是一个数组,结果 JSX 会把它的享有成员,添加到模板

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

return (
<span>
{
datas.map(function(i){
return <span {…option} key={i.id}>我是{i.name}a a a
</span>;
})
}
</span>
)

四、组件

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,而利用其他库。
大家竟然足以把1个Promise对象传入组件,请看德姆o12。

  }

ReactDOM.render(
<RepoList
promise={$.getJSON(‘
/>,
document.body
);
上边代码从Github的API抓取数据,然后将Promise对象作为质量,传给RepoList组件。
设若Promise对象正在抓取数据(pending状态),组件展现”正在加载”;若是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 的1个实例(下文的”组件”都指组件类的实例)。全体组件类都不能够不有自个儿的 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=”John”> ,正是 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 ;假设有3个子节点,数据类型是 object ;要是有四个子节点,数据类型正是 array 。所以,处理 this.props.children 的时候要小心。

React
提供三个工具方法 React.Children 来处理 this.props.children 。大家能够用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 照旧 object。越多的 React.Children 的章程,请参见法定文书档案。

六、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”。

7、获取真实的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
是拿不到用户输入的。为了成功这或多或少,文本输入框必须有3个 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’)

);

下面代码是1个 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 还提供三种特殊意况的处理函数。

component威尔ReceiveProps(object
nextProps):已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object
nextState):组件判断是或不是再一次渲染时调用

那几个艺术的详实表明,能够参照合法文书档案。上边是1个例证。

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 方法设置3个定时器,每隔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状态),组件显示”正在加载”;假若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的死忠粉,脑残粉。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website