React.js

时间 2019-11-10

标签 react.js react 栏目 React 繁體版

原文原文链接

react

　　Facebook内部的一个javascript库，它引入了一种新的方试来操做DOM。

　　进行数据交互的时候，利用差别算法，不用总体更新DOM，只会更新有变化的DOM，极大的提升的性能
javascript

　　官网访问：https://facebook.github.io/react/html

　　国外网站，速度通常比较慢，能够访问国内的网站：http://reactjs.cn/java

　　学习过程当中，遇到任何问题均可以到这个论坛去留言：http://react-china.org/react

1、特色

一、JSX语法

html结构与js能够混在一块儿写，更加清晰git

二、虚拟DOM

经过DOM diff算法，只会更新有差别化的部分，不用渲染整个页面，从而提升效率github

三、组件化

把页面上的功能都写个组件，而后能够结合起来，能够作到重用算法

二、安装

一、须要引入三个js文件

react.js 核心代码数组

react-dom.js 渲染DOMbabel

browser.min.js 解析JSX语法dom

<head> <meta charset="UTF-8"> <title></title> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> </head>

二、script标签的type类型必定要是text/babel

　　(browser.min.js看到type为text/babel的script标签后，会把里面的内容解析成正常的js语法)

<script type="text/babel"></script>

3、js的代码依然要用//或者//注释，不能用html的注释，要不会报错**

/*ReactDOM.render( <ul> { colors.map(function(value,index){ return <li>第{index}个是:{value}</li> }) } </ul>, document.getElementById('box') );*/

三、ReactDOM.render()方法

React的最基本方法，将React的模板语法转为真正的HTML，并插入到指定的DOM节点里，再渲染它

参数1：建立的元素

参数2：要添加给谁（DOM元素）

参数3：渲染成功后的回调函数

<script type="text/babel"> ReactDOM.render( <h1>kaivon</h1>,　　//建立的元素 document.getElementById('box'),//要添加给谁（DOM元素)　　 function(){ console.log('渲染完成了');//渲染成功后的回调函数  } ); </script>

四、JSX语法　　JavaScript XML

概念

React的语法，它容许HTML与JavaScript混写，在html里能够写js

React不使用JSX的语法也能够工做，使用的话会提升组件的可读性，推荐使用JSX

特色

一、遇到尖括号开头的解析成html。遇到大括号开头的解析成JavaScript

注意：大括号要解析成js代码，因此里面不要有分号

var colors=['red','green','blue']; ReactDOM.render( <ul> { colors.map(function(value,index){ return <li>第{index}个是:{value}</li>  }) } </ul>,　　　　　　　　　　　　//第一个参数 document.getElementById('box') //第二个参数 );

　　二、能够在模板里插入变量，若是这个变量是个数组，则会本身把数组里全部数据所有显示

var arr=[ <li>kaivon</li>, <li>陈学辉</li>, <li>356985332</li> ]; ReactDOM.render( <ul>{arr}</ul>, document.getElementById('box') ）

5、定义组件

　　React中能够把每一个功能都定义成组件，而后组件会像普通的html标签同样，插入到页面中

一、建立组件

React.createClass()

注意：

一、存组件的变量名首字母要大写

二、render的return里只能出现一个顶层标签

二、插入组件

把定义好的组件放在尖括号里，就造成了一个标签，就能以标签的形式插入到页面中

　插入方法：

一、<组件名/>这就是XML

二、<组件名></组件名>

<script type="text/babel"> //建立组件 var Person=React.createClass({  render:function(){ 　　return ( 　　 <div> 　　 <h1>kaivon</h1> 　　 <h2>陈学辉</h2> 　　<h3>18</h3> 　　 </div>  　　　) 　　} }); //添加组件，ReactDOM.render不只能够输出html结构，还能够输出组件  ReactDOM.render(
 <Person/>, //这里能够写单标签，也能够写双标签
 document.getElementById('box') ); </script

6、组件的属性

　 props 它身上放的就是咱们传进来的属性

插入组件的时候能够像html标签添加属性的方式同样，给组件传递数据

<script type="text/babel"> var name='kaivon'; var age=18; var sex='男'; var Person=React.createClass({ render:function(){ return ( <div> <h1>{this.props.name}</h1> <h2>{this.props.age}</h2> <h3>{this.props.sex}</h3> </div>  ) } }); ReactDOM.render( //<Person age='18'/>, <Person name={name} age={age} sex={sex}/>, //这里能够写单标签，也能够写双标签   document.getElementById('box') ); </script>

七、组件子节点

　　props对象的属性与组件的属性是一一对应的，可是有一个例外，props.children属性(组件的全部子节点)它的值不必定是一一对应的

　　props.children的值有三种类型

一、undefined 当前组件没有子节点

二、object 当前组件只有一个子节点

三、array 当前组件有多个子节点

能够用

React.Children.map()方法来遍历子节点，不用担忧它的类型是什么，均可以遍历出来

<script type="text/babel"> var List=React.createClass({ render:function(){ return ( <ul> { //console.log(this.props.children) 　　　　　　　React.Children.map(this.props.children,function(child){ return <li>{child}</li>  }) } </ul>  ) } }); ReactDOM.render( <List> <span>red</span> <span>green</span> </List>, document.getElementById('box') ); </script>

八、验证组件属性值的类型：

　　组件的属性能够接受任意值，字符串、对象、函数等等均可以。有时，咱们须要一种机制，验证别人使用组件时，提供的参数是否符合要求

只会提示警告，可是内容依然能够出来

<script type="text/babel"> var person={ name:'kaivon', age:18, sex:'男' } var Person=React.createClass({ render:function(){ return ( <div> <h1>{this.props.name}</h1> <h2>{this.props.age}</h2> <h3>{this.props.sex}</h3> </div>  ) },  propTypes:{ name:React.PropTypes.string, age:React.PropTypes.number, sex:React.PropTypes.string } }); ReactDOM.render( <Person {...person} />, document.getElementById('box') ); </script>

九、组件的状态

组件免不了要与用户互动，React的一大创新，就是将组件当作是一个状态机

　　一开始有一个初始状态， 而后用户互动，致使状态变化，从而触发从新渲染UI

getInitialState() 获取组件的状态

一、它必需写在建立组件的函数里

二、它必需有一个返回值是null或者对象

　　state 获取状态对应的属性值(getInitialState方法的返回值)

　　 setState() 设置组件的状态

　　 它是组件身上的方法，组件是放在ReactDOM.render的返回值里

<script type="text/babel">
    var Status=React.createClass({ getInitialState:function(){ return {  on:true, mes:'kaivon的第一种状态'    //数据
 } }, render:function(){ var style={ //三目运算符 定义样式
                color:this.state.on?'red':'blue', fontSize:this.state.on?'20px':'30px' } return ( //添加到行间样式
                //style={style}结构里面想要执行js,须要添加大括号
                <h2 style={style}>{this.state.mes}</h2>
 ) } }); //渲染
     //声明一个变量接收render的返回值
   var component=ReactDOM.render( <Status/>,
        document.getElementById('box') ); //console.log(component);
 component.setState({ on:false, mes:'kaivon的第二种状态' });</script>

React.js

react

Facebook内部的一个javascript库，它引入了一种新的方试来操做DOM。

1、特色

一、JSX语法

二、虚拟DOM

三、组件化

二、安装

一、须要引入三个js文件

二、script标签的type类型必定要是text/babel

3、js的代码依然要用/**/或者//注释，不能用html的注释，要不会报错

三、ReactDOM.render()方法

四、JSX语法 JavaScript XML

概念

特色

5、定义组件

一、建立组件

React.createClass()

注意：

二、插入组件

插入方法：

6、组件的属性

七、组件子节点

props.children的值有三种类型

八、验证组件属性值的类型：

九、组件的状态

　　Facebook内部的一个javascript库，它引入了一种新的方试来操做DOM。

3、js的代码依然要用//或者//注释，不能用html的注释，要不会报错**

四、JSX语法　　JavaScript XML

　插入方法：

　　props.children的值有三种类型