React.js的启动研究第一章

一、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上下文。花括号内可以是变量或函数。例如：

var name=" wintyp { name }/p function date(d){ return[d . getfullyear()、d.getMonth() 1、d.getDate() ]。join('-)；};P{date(new Date()}/p2。注释：首先，子节点中的注释应该用花括号包装，然后您可以在单行中注释/* */或者在多行中注释//。

varhello=react . create class({ render : function(){ return p name=' winty '//setname hello，world/*多行注释*//p } })；3.使用CSS内联样式。

var style={ color: # 000};React.render(div style={style}./div，document . body)；4.使用条件判断。

//方法1，三项式运算符varhello=react . create class({ render : function(){ return p hello，{this.props.name？this . props . name : ' LuckyWinty ' }/p } })；//方法2，if-else语句varhello 1=react . create class({ getname : function(){ if(this . props . name))返回this . props . name；否则返回‘lucky winty’；render : function(){ return pHello，{ this . getname }/p } })；//方法3，使用逻辑| |运算符varhello 3=react . create class({ render : function(){ return p hello，{this。props . name | | ' lucky winty ' }/p } })；引入非DOM属性。

在JSX有三个非DOM属性，分别是：dangerouslySetInnerHTML、ref和key。

DangerouslySetInnerHTML:将HTML代码直接插入JSX，但是如果可以避免使用这个属性，尽量避免使用它。

内部HTML的不当使用可能会导致跨站点脚本(XSS)攻击。对用户输入进行净化显示时往往会出现错误，净化不当也是导致网页攻击的原因之一。在彻底了解安全问题的后果并正确净化数据后，生成一个只包含唯一密钥__html的对象，该对象的值就是净化后的数据。例如：

函数createMarkup(){ return { _ _ html : ' First Second ' }；};div dangerouslystinnertml={ create markup()}/ref:父组件引用子组件，您可以通过在属性中设置预期的引用名称来定义引用。例如：

.render 3360 function(){ return div input ref=' my input './/div}.//然后就可以在组件中的任何地方使用this.refs.myInput来获取引用键：是一个可选的唯一标识符，通过为组件设置一个唯一键，并保证它在一个渲染周期内是一致的，这样React就只能决定是重用一个组件还是销毁重建一个组件，从而提高渲染性能。例如：

var hello 3=react . create class({ render : function(){ return ul Li key=' 1 ' 1/Li Li key=' 2 ' 2/Li Li key=' 3 ' 3/Li/ul } })；第二，React组件生命周期的详细说明。

组件本质上是状态机，输入由输入决定，输出由输出决定。程序变得直观。当状态转换发生时，会触发不同的钩子函数，这给了开发人员一个响应的机会。状态可以用事件的方式来理解，但事件是相互独立的，但不同的状态可能会相互影响。组件的所有状态被组合起来形成组件的生命周期。即：初始化阶段-运行阶段-破坏阶段。

可在不同生命周期自定义的函数初始化阶段：getdefaultprop s 3360获取默认属性，只调用一次，在createClass后调用。实例之间共享引用getInitialState:初始化每个实例的唯一初始化状态component willmont : out表示加载，表示组件很快会加载到页面中，这也是渲染前最后一次修改状态的机会； render :在render函数中生成虚拟节点，最后react将虚拟节点转化为真实节点，在页面上进行渲染。只能访问this.props和this.state，顶层组件只有一个，最好不要修改状态和DOM输出。加载后才会调用componentdimont :组件，也就是说调用此方法时，组件已经在页面上呈现，此时可以修改DOM。这五个功能的执行顺序是从上到下。需要注意的是，getDefaultProps只会在组件的第一个实例初始化时被调用，也就是说，在第二个实例之后，才会从getInitialState调用。同一组件的所有实例的默认属性都是相同的。主要测试代码：

脚本类型=' text/babel ' var Hello=react . createclass({ getdefaultprop 3360 function(){ console . log(' getDefaultProps，1 ')；}，getInitialState : function(){ console . log(' getInitialState，2 ')；返回null}，component will mount : function(){ console . log(' component will mount，3 ')；}，render : function(){ console . log(' render，4 ')；返回pHi，LuckyWinty！/p }，componentdimunt : function(){ console . log(' componentdimunt，5 ')；}, });React.render(Hello/Hello，document . body)；/脚本运行结果：

跑步舞台：

componentwillreceiveprop 3360当组件即将接收属性时，或者当父组件的属性发生变化时，开发人员有机会在属性传输到组件之前，通过此函数处理属性。比如修改和更新内部状态。shouldComponentUpdate:当组件接收到新属性或新状态时触发。这是一个问题函数，这意味着我们可以告诉react不要更新组件。因为有时属性或状态不会导致组件被更新。如果组件不需要更新，手动使shouldComponentUpdate返回false，这样react就不需要经过render和diff算法来决定是否更新，从而提高性能。 componenttwillupdate:在render的触发器之前触发，更新组件，不能修改属性和状态render:组件在render函数中生成虚拟节点，最后react将虚拟节点变成真实节点呈现在页面上，只能访问this.props和this.state，顶层组件只有一个，最好不要修改状态和DOM输出。 componentdidupdate:渲染后，渲染真实的DOM，然后调用。备注：这五个函数的执行顺序也是从上到下。本测试代码已上传至：https://github.com/LuckyWinty/ReactStudyDemo,请参考！

销毁阶段：在实际执行销毁操作之前调用函数componentwillumpunt :给开发人员最后一次机会做一些清理工作。

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

属性的含义：props=properties，组件本身不能修改属性，组件的属性由父组件传入。属性的用法：1)键值对。

Hello name=' winty '/string Hello name={ 123 }/求值表达式Hello name={[1，2，3]}/传入数组Hello name={winty}/变量2)，扩展定义(个人认为是面向对象的定义)。

如果var props={one:' 123 '，two:' 22'}是这样定义的，理论上应该叫like one={props.one}，但是这样写比较麻烦，如果修改了数据，需要相应修改对应的赋值，不能动态设置属性，所以在react: hello {)中增加了扩展语法。这样，使用扩展语法，react会自动将对象中的变量和值视为属性的赋值，所以Hello实际上获得了两个属性，一个和两个。如果没有三个点，Hello实际上得到的是props对象，使用时需要自己从中取出变量和值。(3)调用react提供的setProps()函数(几乎没有必要)。

var instance=react . render(hello world/hello world，document . body)；instance . SetPops({ name : ' winty ' })；状态的含义：状态，是事物自身处理的不断变化的状态。用法：getInitialState:初始化实例的状态setState:更新组件的状态。状态更新后，将触发diff算法来检查内容是否已更改。如果是，更新组件；否则，它将不会被使用。

与状态相比，属性相似：都是纯JS对象，都触发渲染更新，都是确定性的。

区分属性和状态：组件在运行时需要修改的数据就是状态。

四.React事件处理程序中事件的用法：React中绑定事件处理程序的方法与HTML语法非常相似。所有事件都是根据本机javascript规范命名的，并且会在相同的情况下被触发。编写函数handleclick : function(){ 0.}绑定onClick={this.handleClick}。

各种事件的详细描述：移动设备上的触摸事件：onTouchCancel、onTouchEnd、onTouchMove、onTouchStart 键盘事件：onKeyDown、onKeyPress、onKeyUp剪切事件：onCopy、onCut、onPaste 表单类：onChange//内容发生变化时触发、onInput//输入框、onSubmit//禁止表单默认跳转行为事件：onFocus、OnBullUI元素类：OnCrall鼠标滚动事件：onWheel鼠标类型：onClick、content onDragExit，onDragLeave，onDragOver和onDragStart事件对象的用法是在写事件对象处理程序时添加一个参数。 得到这个对象后，可以通过对象的属性得到一些信息。例如：

handleChange:function(事件){ console . log(event . target . value)；}在示例中，event是一个事件对象，event.target是事件对象的属性，也就是对应的DOM元素。获取此元素后，获取其值。事件属性常规属性：

其他类型的事件具有不同的属性。让我们简单看一下。

知道了事件的一些属性，我们就可以在React中轻松获取这些属性，进行一些逻辑处理，实现一些复杂的业务功能和页面效果。

例如，我们可以使用鼠标事件属性实时显示鼠标在某个区域的坐标：

脚本类型=' text/jsx ' var HelloWorld=react . createclass({ getinitialstate : function(){ return { x : 0，y : 0 } 0 }，handlemousemove : function(event){ this . setstate({ x : event . clientx，y : event . clienty })；}，render : function(){ return div onMouseMove={ this . handlemousemove } style={ { height : ' 500 px '，width: '500px '，background color : ' gray ' } } { this . state . x '， this . state . y }/div；}, });react . render(hello world/hello world，document . body)；/scriptx组件协作使用的定义：组件协作本质上是一种组织和管理组件的方式。组件协同使用的目的：清晰的逻辑、模块化的代码、详细的包和可重用的代码。组件的协同使用：组件的嵌套使用：也就是说用一个父组件包装一个子组件，本质上是一种父子关系。下图描述了：

示例代码：

var React=required(' React ')；var CommentList=require('。/comment list . jsx’)；var CommentForm=require('。/comment from . jsx’)；var comment box=react . create class({ render : function(){ return(div class name=' comment box ' h1 comments/h1 comment list///这是一个组件CommentForm///这是另一个组件/div)；}});module.exports=CommentBox父子组件之间的通信：父组件-子组件：通过属性，父组件通过属性-父组件将数据传递给子组件：本质上，子组件无法与父组件通信。而是可以通过触发事件间接沟通，也就是委托。嵌套的缺点：亲子关系的具体实现需要慎重考虑，贸然编写会导致关系混乱，代码维护困难，无法掌握所有细节。用户只知道组件的用法，不知道实现细节，遇到问题很难修复。 Mixin3360意味着可以将相同的代码进行抽象，封装成函数，然后调用。

Mixin :的目的是水平提取组件的相似代码。类似的概念：切向编程，插件实例代码：

var Time=react . create class({ mixin :[interval mixin(1000)]，getinitialstate : function(){ return { secondelapsed :0 }；}，ontick : function(){ this . setstate({ secondelapsed : this . state . second appeared 1 })；}，render : function(){ return(div seconds elapsed : { this . state . secondselafferd }/div)；}});Mixin非常简单，它们只是混合到组件类中的对象。React在这方面已经有了更深层次的实现，可以防止静默功能覆盖，也支持多mixin混合。但是，这些功能可能会在其他系统中引起冲突。例如：

react . CreateClass({ mixin s :[{ Getinitialstate : FuncTion(){ return { a :1 } }]，Getinitialstate : FuncTion(){ return { b :2 } } })；这样，在mixin和component类中同时定义了getInitialState方法，得到的初始状态为{a:1，b:2}。如果mixin和组件类中的方法返回的对象中有重复的键，React将抛出一个错误来警告这个问题。

不及物动词反应中的双向结合。

React的想法不同于angular的想法。React是单向数据绑定。那么，如何达到像棱角分明一样的双向绑定效果呢？看看代码：

！DOCTYPE html html lang=' zh-cn ' head meta charset=' UTF-8 ' title react中的双向数据绑定/标题/床头柜脚本src='http:/react-0。13 .2/react-0。13 .2/构建/与插件反应。js '/script script src=' http :/react-0。13 .2/react-0。13 .2/构建/jsxtransformer。js /脚本脚本类型=' text/jsx ' var binding mixin={ handlechange : function(key){ var那=this var newState={ } return function(event){ newState[key]=event。目标。重视这个。setstate(newState)} } var绑定示例=react。createclass({ mixin 3360[react。插件。linked statemix }).请输入内容值链接={ this。link state(' text ')}/文本区域值link={ this。linkstate(' comment ')}/text area H3 { this。国家。文本}/H3H3 {这。国家。评论}/H3/div })做出反应。呈现(绑定示例/绑定示例，文档。身体)；/脚本/正文/html效果图（没有半铸钢钢性铸铁(铸造半钢)样式，有点不优雅，见谅):

以上就是本文的全部内容，希望对大家的学习有所帮助。