React 入门之路(1)
是由Facebook公司推广的一套框架，已经应用instagram等产品
React就是为了提供应用程序性能而设计的一套框架
在以前学的angular中，对dom提供了一些指令，让dom具有一些功能，例如ng-repeat让dom具有动态循环渲染的功能，ng-show让dom元素具有动态显隐的功能等等
比如将页面比作一辆汽车，
Angular的实现就是为汽车添加一些装饰，增加一些功能，让汽车看上去很高大尚，这样势必要加大油门
React的实现就是重新制造一辆汽车，是有四个轱辘，即可启动，不要很大的油门
React有三大创新
虚拟dom
组件开发
多端适配
一处开发，处处适用
体验react
https://github.com/facebook/react
在0.13版本后，react做了一个处理
将react文件分成两个部分（创建虚拟dom， 渲染虚拟dom的）
React.js核心库文件（创建虚拟dom的，核心模块，写的应用程序可以兼容所有端）
React-dom.js在浏览器端渲染虚拟dom
创建虚拟dom
由react对象提供的一个方法createElement
第一个参数表示虚拟dom的名称，例如div
有时我们还可以传递组件
第二个参数是一个对象，表示虚拟dom中拥有的属性
从第三个参数开始表示该虚拟dom元素的子元素
子元素也要由createElement创建，但是文本节点可以直接写
方法的返回值是一个虚拟dom（js对象）
Props表示虚拟dom的属性对象
Children表示该虚拟dom的所有子虚拟dom
Type表示该虚拟dom的类型
我们最终的目的是将虚拟dom渲染到页面中，所以需要第二个api
Render
由ReactDOM提供的一个方法
三个参数
1 渲染虚拟dom元素
2 真实的dom元素
3 渲染完成回调函数（不常用）
1 // 创建虚拟dom 2 var h1 = React.createElement( 3 'h1', 4 { 5 title: '这是标题' 6 }, 7 '爱创课堂' 8 ) 9 // 将h1渲染到页面中 10 ReactDOM.render(h1, document.getElementById('app'), function () { 11 console.log(arguments) 12 console.log(this) 13 }) |
组件
在react中定义的一个虚拟dom很难复用，所以通常我们将一组虚拟dom定义在组件中来复用
createClass可以用来创建一个组件
参数是一个对象，用来描述组件的
可以在对象中定义render方法，通过返回值来渲染这组组件
返回值，通常所有虚拟dom都在一个容器内
组件式一个类，因此组件名称要以大写字母开头
组件要想渲染到页面中，就要将组件转化成虚拟dom，通过React.createElement方法
1 var List = React.createClass({ 2 // 通过render渲染页面 3 render: function () { 4 return ( 5 React.createElement( 6 'ul', 7 null, 8 React.createElement('li', null, '六间房秀场'), 9 React.createElement('li', null, '斗鱼TV'), 10 React.createElement('li', null, '美女秀场'), 11 React.createElement('li', null, '秀色直播') 12 ) 13 ) 14 } 15 }) 16 // 将组件渲染到页面中 17 // 转化组件到虚拟DOM 18 var ul = React.createElement(List) 19 ReactDOM.render(ul, document.getElementById('app')) |
JSX语法
我们写虚拟dom的最大问题
创建一个虚拟dom成本太高了（写的太麻烦了）
React团队为了简化对createElement的书写，为我们提供了jsx语法
就是像写真实的dom元素一样，写虚拟dom
例如
我们在html中定义div
<div></div>
在jsx语法中定义虚拟dom
<div></div>
在html中定义input
<input type=”text” />
在jsx语法中定义虚拟dom
<input type=”text” />
所以jsx语法定义虚拟dom就简单多了，但是遗憾的是，浏览器不支持这种语法
所以react团队提供了两种处理方法
第一种，在浏览器端编译
引入编译库，例如browser.js可以对jsx语法编译
此时定义的script标签的type类型要定义成text/babel
在里面可以写jsx语法
第二种，在工程化中编译（最常见的）
编译jsx语法，跟以前编译less，sass，stylus很像
首先要获取这些jsx文件（通常我们将写jsx语法的文件拓展名改成.jsx）
fis-parser-babel2
parser: ‘babel2’
rExt: ‘.js’
1 fis.match('**.jsx', { 2 // 编译 3 parser: 'babel2', 4 // 更改后缀名称 5 rExt: '.js' 6 }) |
特殊属性
Class
Class在js中是保留字，因此在react定义虚拟dom的时候，将class写成className
For
是label元素特有的属性
For是js中的关键字，因此在react定义虚拟dom的时候，将for属性写成htmlFor
1 var h1 = (<h1 className="red">爱创课堂</h1>); 2 // 将虚拟dom渲染到页面中 3 ReactDOM.render(h1, document.getElementById('app')) 4 5 // 创建一个组件 6 var User = React.createClass({ 7 render: function() { 8 // 返回虚拟dom 9 return ( 10 <div> 11 <label htmlFor="user_name">用户名</label> 12 <input /> 13 </div> 14 ); 15 } 16 }) |
插值
React支持插值语法，我们在jsx语法中使用
语法 {}
一对{}提供了一个js环境，因此我们可以在大括号里面设置虚拟dom元素的属性，设置虚拟dom元素的内容
我们可以在插值符号中使用js中的任何表达式
注释
在jsx语法中注释很特殊
不能直接写在虚拟dom中
在虚拟dom中，单行注释和多行注释都会被看成文本节点
我们尽量将注释写在jsx语法外面，否则只能在插值符号中写多行注释
一定要写在插值符号中，并且只能支持多行注释的语法
语法 {/**/}
插值符号中换行后可以写单行注释，但是跟多行注释没有区别的
1 // 定义组件 2 var Main = React.createClass({ 3 //渲染虚拟dom 4 render: function () { 5 var username = "雨夜清荷"; 6 var date = new Date(); 7 // 2017-3-14 8 // js中支持两种注释 9 // 单行注释 10 /* 11 多行注释 12 */ 13 return ( 14 <div> 15 // 这是单行注释 16 /* 17 这是多行注释 18 */ 19 {/* 20 这里写的注释，才真正是注释，编译时会删除 21 */} 22 { 23 // 单行注释 24 } 25 <h1>{username}</h1> 26 <p>{date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()}</p> 27 </div> 28 ) 29 } 30 }) |
非元素属性
Key 为列表元素定义react-id，绑定id。这样可以方便获取页面中哪些元素更新了，哪些元素需要更新
Render方法的作用域是组件实例化对象，可以访问到组件中定义的方法
1 createChildList: function () { 2 // 遍历数组，处理每一个成员，然后映射一个新数组，就是map方法 3 return data.map(function (value, index) { 4 // 每一个li要绑定内容，还要设置key 5 return <li key={index}>{value}</li>; 6 }) 7 }, |
属性
在html中，对于同一类元素来说，之所以展现的样式不一样，是因为他们具有不同的属性，所以属性可以让同一类元素展现出不同的状态
同样的道理，在react中，对于同一个组件来说，可以创建一组虚拟dom树，如果想让虚拟dom树展现出不同的状态，我们就要为其添加属性
在虚拟dom上添加属性跟在html中元素上添加属性是一样的，通过添加一个属性实现（只不过在组件上添加的都是自定义属性）
我们添加的自定义属性，会存储在组件的props属性中，我们通过this.props可以访问到里面的数据
组件的默认属性我们定义在getDefaultProps中
通过返回值设置默认属性数据
1 // 创建导航标题组件 2 var Nav = React.createClass({ 3 // 定义默认属性数据 4 getDefaultProps: function () { 5 // 通过返回值定义默认属性数据 6 return { 7 data: ['默认标题'] 8 } 9 }, 10 // 封装渲染内容的方法 11 createChildList: function () { 12 var me = this; 13 // 遍历this.props.data渲染 14 return this.props.data.map(function (value, index) { 15 return (<a href="" key={index}>{value}{index != me.props.data.length - 1 ? '/' : ''}</a>) 16 }) 17 }, 18 // 通过render方法渲染虚拟dom树 19 render: function () { 20 return ( 21 <div> 22 {this.createChildList()} 23 </div> 24 ) 25 } 26 }) 27 var data1 = ['财经', '证券', '理财']; 28 // 渲染 29 ReactDOM.render(<Nav data={data1} />, document.getElementById('app')) |
样式
在虚拟dom中我们可以为元素定义样式
在react中，虚拟dom上不能使用行内样式字符串
行内样式只能定义成对象
Css属性名称如果出现多个单词，要使用驼峰式命名
例如
border-color => borderColor
还要求浏览器前缀第一个字母要大写
例如
-webkit-box-shadow => WebkitBoxShadow
在createElement方法中，样式写在style中，直接赋值对象
在jsx语法中，样式写在style中，要使用插值语法
1 // 定义虚拟dom 2 var h1 = React.createElement('h1', { 3 style: { 4 color: 'red', 5 fontSize: '40px' 6 } 7 }, '爱创课堂'); 8 9 // jsx语法，定义虚拟dom 10 var h1 = (<h1 style={{ 11 color: 'green', 12 fontSize: '100px' 13 }}>爱创课堂</h1>) |
事件
React中定义事件，跟在html中定义事件很像
在html中定义事件
<button onclick="console.log('hello')">按钮</button>
在react中jsx语法中定义事件，跟html中定义事件是很像
<button onClick={this.clickBtn}>按钮</button>
on+事件名称=回调函数
事件名称首字母大写
事件回调函数通常绑定组件中的方法
事件回调函数不要执行（后面不要加()）
事件回调函数
作用域是组件实例化对象（可以通过this访问组件上的方法以及属性数据）
可以通过bind方法更改作用域
可以通过bind方法传递自定义参数（很少用）
参数有三个
React封装的事件对象（最常用）
React-id
源生的事件对象
1 var Demo = React.createClass({ 2 // 定义事件回调函数 3 clickBtn: function () { 4 console.log(arguments) 5 console.log(this) 6 }, 7 render: function () { 8 return ( 9 <div> 10 <button onClick={this.clickBtn.bind(this, 11)}>这是个按钮</button> 11 </div> 12 ) 13 } 14 }) |
状态
状态跟属性一样都是在组件内部存储数据的
属性是组件外部传递的数据
状态是组件内部维护的数据
有状态组件以及无状态组件
无状态组件
对于一个组件来说，如果组件没有状态，也就是说组件式一成不变的，组件在创建之后，不会发生交互，请求数据等等，这类组件叫无状态组件，
组件自身不会维护状态
有状态组件
对于一个组件来说，自从创建以后，组件会产生一些交互，请求一些数据，来完成自身状态的更新，这类组件内部必须维护一个状态来存储这些变化的数据，这类组件叫有状态
组件处于哪种状态由其自身存储的数据决定
组件的存储跟属性一样，在组件实例化对象中有个state属性，就是用来存储状态数据
初始化状态用getInitialState方法定义
通过return 将初始化状态的数据返回
修改状态，用setState方法
参数是一个对象，对象中的属性就是即将修改的状态
状态或者属性的改变都会触发render方法的执行
1 changeOneChange: function () { 2 // 更改状态 3 this.setState({ 4 num: ++this.state.num 5 }) 6 }, |
在组件中发送异步请求，通常在组件创建完成时候发送
所以在componentDidMount方法中发送
ReactJS1
复习3
ES55
date对象拓展5
Bind5
Create6
React6
体验react7
创建虚拟dom7
Render8
组件8
JSX语法9
特殊属性10
插值10
注释10
非元素属性11
属性11
样式12
事件13
状态14
以上是 React 入门之路(1) 的全部内容， 来源链接： utcz.com/z/384017.html
