ブラウザの最初に、原則
二、REACT
約2.1が反応します
反応は、開発者の好みによって、その優れた性能で、Facebookのチームを促進するためのフレームワークです
2.1.1が反応三つの主要な機能を備えています
仮想DOM
コンポーネント開発
マルチポートアダプタ
2.1.2のGithub
https://github.com/facebook/react
2.1.3が反応入手します
react.jsファイルを取得します。
反応亭インストール
モジュールを反応取得
NPMは反応インストール
私たちは、第二の方法は、インストールするように反応、文法の開発を説明教室ES6のこのセットを採用します
2.1.4マルチポートアダプタ
その後、react14バージョンから、この理想を実現するために、マルチポートアダプタを反応させます。2つのファイルにコードベースを分割するには：
仮想DOMおよびコンポーネントを作成するために使用されるreact.js（コアライブラリ）、
反応-dom.js各端部でレンダリング（描画ライブラリ）を、各端部が同一のレンダリングライブラリはありません
2.2経験が反応
2.2.1仮想DOMを作成します
仮想DOMを作成するためのcreateElementメソッドを提供コアライブラリを反応させます
最初のパラメータは、仮想DOM名（また、コンポーネントクラスであってもよい）を表します
第2のパラメータは、オブジェクトの仮想DOM特性（貯蔵必要な属性）を表します
三番目のパラメータの当初から他のサブ仮想DOMを表し、
DOM要素場合は、createElementメソッドで作成するには、
それがテキストノードである場合は直接書き込むことができます
この方法は、仮想DOMにより得られた値を返します
2.2.2仮想DOMオブジェクト
仮想DOMオブジェクトは、必要な情報のみを格納jsオブジェクトであるので、彼らは実メモリのDOMよりもはるかに少ないを使用します（DOM要素が軽量です）
キーは、仮想DOM IDを表し、
DOM属性は、仮想小道具を表し
子どもたちは、すべてのサブ仮想DOMの表す
フラグrefの仮想現実のDOMのDOM参照を
タイプ仮想DOMタイプ
2.2.3レンダリング仮想DOM
ブラウザでのレンダリング、反応-dom.jsと呼ばれるライブラリをレンダリングするブラウザを使用します
これは、レンダリングするために使用されるレンダリング方法を提供し、
最初のパラメータは、仮想DOMを表し
2番目のパラメータは、実際のDOMを示し、
3番目のパラメータは、時間の実装を成功さをレンダリングするためにコールバック関数を示し、
| 1つの//輸入が反応します 2 // import * as React from 'react'; 3 import React, { createElement } from 'react'; 4 // 引入渲染库 5 // import * as ReactDOM from 'react-dom'; 6 import { render } from 'react-dom'; 7 8 // console.log(React) 9 // console.log(ReactDOM) 10 // 创建一个h1虚拟DOM 11 let h1 = createElement('h1', { title: '专业前端培训学校' }, '爱创课堂') 12 console.log(h1) 13 14 // 渲染 15 render(h1, document.getElementById('app'), () => { 16 console.log('success') 17 }) 18 |
2.3组件
为了复用虚拟DOM，react提供了组件，所以组件就是一组封装后的，可被复用的虚拟DOM
ES5语法中，通过React.createClass方法创建
ES6语法中，采用面向对象编程方式，定义类就是定义组件，只不过要继承组件基类Component
通过定义render方法来渲染输出虚拟DOM
在return中定义
注意：
组件是类，因此首字母要大写
组件中有且只能有一个虚拟DOM根元素
render只能渲染虚拟DOM，所以要渲染组件，必须要将组件转成成虚拟DOM，
我们可以通过React.createElement方法，将组件转换成虚拟DOM
| 1 // 创建组件 2 class Demo extends Component { 3 // 通过render方法，渲染输出虚拟DOM 4 render() { 5 // 必须有一个根节点 6 return createElement( 7 'ul', 8 null, 9 // 依次是三个子虚拟DOM 10 createElement('li', null, '中华军事'), 11 createElement('li', null, '米尔军事'), 12 createElement('li', null, '铁血军事') 13 ) 14 } 15 } 16 // 组件不能被渲染，必须要转化成虚拟DOM 17 let demo = createElement(Demo) 18 // console.log(demo) 19 // 渲染虚拟DOM 20 render(demo, app) |
2.4 jsx语法
每次创建虚拟DOM，都要调用createElement方法，太麻烦了，因此react团队提供了jsx语法。
jsx语法核心思想：像书写xhtml中元素一样，来定义虚拟DOM
定义元素
xhtml中定义div元素： <div></div>
jsx语法中定义div虚拟DOM： <div></div>
xhtml中定义input元素： <input type="text" />
jsx语法中定义input虚拟DOM： <input type="text" />
所以jsx语法跟xhtml语法，对于定义元素的语法是一样的
在js环境中，写jsx语法，浏览器不识别，所以我们要编译。
js语法文件拓展名是.js, jsx语法为了区别js语法，将文件名定义成.jsx
2.4.1编译jsx语法
在webpack中配置加载机
规则 /\.jsx$/
加载机：jsx语法也被纳入es2017规范了，所以为了编译jsx语法，提供babel-preset-react插件，但是该插件不能编译ES6中的class，ES2016中的ES Module规范，所以我们还要引入babel-preset-es2015插件，所以定义query的presets属性时候
presets: [‘es2015’, ‘react’]
jsx编译出来的结果是通过React调用的createElement形式，所以一定要引入核心库中的React对象
| 1 class Demo extends Component { 2 // 渲染虚拟DOM 3 render() { 4 // 输出虚拟DOM 5 return ( 6 <ul> 7 <li>中华军事</li> 8 <li>米尔军事</li> 9 <li>铁血军事</li> 10 </ul> 11 ) 12 } 13 } |
2.4.2插值
jsx语法不是js语法，因此浏览器不支持，也不是js环境，就不能使用js表达式，想使用表达式，就要在jsx语法中，创建一个js环境，要使用插值语法
已经学过的插值语法
ejs <%=key%>
MVC <%=key%>
ES6 ${key}
less @{key}
scss #{$key}
微信 {{}} 伪js环境
vue {{}}
react插件语法 {}
注意：react中的插值语法，是在jsx语法中使用
react的插值语法可以在虚拟DOM内部使用。也可以在属性上使用，在属性上使用的时候，插值语法外部不要加引号
虚拟DOM就是对真实DOM，真实DOM可以设置属性，虚拟DOM也可以，并且语法是一样的
key=”value”
如果使用插值语法 key={value}
插值语法提供了js环境，我们可以写任何js表达式
2.4.3注释
jsx语法不是js环境，因此不支持js中的注释，要让js中注释生效，必须创建js环境，可以通过插值语法实现。
使用单行注释的时候：千万不要注释掉插值闭合符号，通常要换行，因此工作中，更常用多行注释
| 1 class Demo extends Component { 2 // 渲染 3 render() { 4 // 变量 5 let title = '爱创课堂'; 6 return ( 7 <div> 8 {// 单行注释 9 } 10 {/* 11 多行注释 12 */} 13 {/*注释*/} 14 <h1 title={title}>{title}</h1> 15 <h1>{`今天：${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}</h1> 16 </div> 17 ) 18 } 19 } |
复习
浏览器：内核， 渲染流程，DOM tree， render tree
repaint， reflow
react：虚拟DOM，组件开发，多端适配
虚拟DOM：createElement(name|comp, attrs, ...children)
js对象：type，ref， key， props
渲染虚拟DOM， render(vdom, dom, fn)
组件 class Name extends Component {}
render()
jsx语法 babel-preset-react
插值 {}
注释
2.5虚拟DOM属性
虚拟DOM是对真实DOM的映射，因此行为特征跟真实DOM是一致的，真实DOM可以添加属性，虚拟DOM也可以添加属性，并且语法是相同的，但是在虚拟DOM中，有四类属性：元素属性，特殊元素属性，非元素属性，自定义数据属性
2.5.1自定义数据属
性就是我们自定义的属性，用来存储数据的，例如data-id，data-type等
2.5.2元素属性
在所有的元素属性中，有一个元素属性的设置是特殊的，style属性，
属性值必须是对象，要使用插值语法定义
例如 <div style={{
backgroundColor: “red”
}}></div>
外面的{}表示插值语法，里面的{}表示对象符号
css中的样式要使用驼峰式命名，如果以浏览器前缀开头，首字母建议大写
即使不使用jsx语法，也要使用对象定义样式
2.5.3特殊元素属性
在虚拟DOM的元素属性中，有两个属性是特殊的，
一个是class属性，命中了ES6中的class关键字，所以我们要写成className
一个是for属性，命中了ES6中的for关键字，所以我们要写成htmlFor
2.5.4非元素属性
该类属性不是元素所特有的属性，但是在react中，这些属性有特殊的意义或作用，所以我们称之为非元素属性
2.5.5 ref属性
用来在组件中，引用该虚拟DOM对应页面中的元素的
第一步 为虚拟DOM添加ref属性，并赋值
第二步 在组件中，通过this.refs.赋值名称，获取该元素
等到组件创建完成时候，我们可以获取：componentDidMount方法表示组件创建完成
注意：获取的是一个源生DOM元素，因此操作时候要使用源生DOM API
2.5.6 dangerouslySetInnerHTML
以危险的方式来设置元素的内容
在react中，所有不合法的操作，都是危险的方式
例如：
我们不能使用行内式字符串
我们不能渲染DOM元素
...
属性值是对象，其中__html属性用来定义元素的内容
2.5.7 key
用来为元素设置react id的
在循环创建虚拟DOM的时候，必须要设置key属性，并且属性值是唯一的
| 1 class App extends Component { 2 // 属性方法 3 createList() { 4 // 用data数据，映射一个包含虚拟DOM的数组，并返回 5 return data.map((item, index) => { 6 return <li key={index}>{item}</li> 7 }) 8 } 9 render() { 10 console.log(this.createList) 11 let content = '<a style="color: red" href="">home</a>' 12 // 只能有一个根元素 13 return ( 14 <div> 15 {/*渲染新闻数据*/} 16 <ul> 17 <li>{data[0]}</li> 18 <li>{data[1]}</li> 19 <li>{data[2]}</li> 20 </ul> 21 {/*<ul> 22 {arr} 23 </ul>*/} 24 <ul> 25 {this.createList()} 26 </ul> 27 <h1>{content}</h1> 28 {/*渲染标签*/} 29 <h1 dangerouslySetInnerHTML={{ 30 __html: content 31 }}></h1> 32 {/*获取这个元素*/} 33 <h1 ref="title" style={{ 34 color: 'red', 35 backgroundColor: 'green' 36 }}>爱创课堂</h1> 37 <p className="demo">hello</p> 38 <p className="dmeo"></p> 39 <label htmlFor="username">用户名</label> 40 <input type="text" id="username" /> 41 </div> 42 ) 43 } 44 // 组件创建完成 45 componentDidMount() { 46 console.log(this.refs.title.innerHTML); 47 } 48 } |
2.6组件属性
虚拟DOM是对真实DOM的映射，因此与真实DOM有相同的行为
真实的DOM定义属性的目的是：是为了让其展现的形式具有多样性
组件是对虚拟DOM封装，使用组件是为了复用这组虚拟DOM，所以组件与虚拟DOM也有相同的行为
虚拟DOM与真实DOM行为一致，定义属性为了让其展现的形式具有多样性，
组件与虚拟DOM行为是一致的，定义属性为了让其展现的形式具有多样性，
2.6.1使用属性数据
组件定义属性的语法与虚拟DOM定义属性的语法是一样的
虚拟DOM： <div title="hello"></div>
组件： <Ickt title=”hello”></Ickt>
注意：
虚拟DOM有四类属性数据：元素属性，非元素属性，特殊元素属性，自定义数据属性
组件只有一类属性数据，就是自定义数据属性（所有的属性都是为了存储，传递数据的）
为组件添加了属性，我们可以在组件内部获取这部分数据
通过this.props属性获取
注意：绝对不能在内部修改属性数据，想修改属性数据，只能在组件的外部，传递数据时修改。
2.6.2默认数据
我们可以为组件定义defaultProps静态属性，来声明默认属性数据
ES6开发中，定义静态属性有两种方式
1 在类的内部通过static关键字，定义get方法
2 在类的外部通过点语法，定义静态属性数据
在React中，建议我们用第二种方式，在类的外部，通过点语法，定义defaultProps静态属性，来声明默认属性数据
2.6.3约束性属性数据
在16版本中，react已经将属性约束性模块，分离出来了，我们要安装再使用
我们通过npm安装 prop-types模块
npm install prop-types
我们引入该库，提供了大量的类型，可以用来约束属性
每个类型的下面，都有一个isRequired的方法，表示该属性是必填的
我们为组件定义propTypes静态属性，来对每一个属性做约束
注意：如果定义了默认属性，该约束就失效了
| 1 // 引入库 2 import React, { Component } from 'react'; 3 import { render } from 'react-dom'; 4 // 引入属性类型 5 import PropTypes from 'prop-types'; 6 // import * as PropTypes from 'prop-types'; 7 // console.log(PropTypes) 8 9 // 定义组件 10 class News extends Component { 11 // 渲染li方法 12 createList() { 13 // 根据属性创建数据 14 // return this.props.data.map((item, index) => { 15 // // 列表一定要添加key属性 16 // return <li key={index}>{item}</li> 17 // }) 18 // 省略函数体{} 19 return this.props.data.map((item, index) => <li key={index}>{item}</li>) 20 } 21 // 渲染 22 render() { 23 // console.log(this) 24 // 创建新闻列表 25 return ( 26 <ul>{this.createList()}</ul> 27 ) 28 } 29 } 30 31 // 定义默认属性 32 News.defaultProps = { 33 data: ['默认新闻'] 34 } 35 36 // 属性约束 37 News.propTypes = { 38 // 是必填的 39 data: PropTypes.array.isRequired 40 } 41 42 // 使用组件，并传递属性数据 43 let data = ["别担心石油会枯竭了!地球上石油很丰富", "他在沙特和女同事一起吃早餐 就被抓了", "我被董事长绑架414天 睡觉都戴手铐"] 44 render(<News data={data}></News>, app) 45 render(<News data={["片酬是孙俪12倍 她现在被骂滚回家", "马蓉生活潦倒？这装备暴露经济现状", "50岁张敏近照曝光！依旧风姿绰约"]}></News>, app2) 46 render(<News></News>, app3) |
2.7 DOM事件
仮想DOMバインディングイベントにhtmlページの構文を反応させ、エレメント結合構文と同様のイベント
DOM要素：<DIVのonclick = "FN（）">アショカ教室</ div>
仮想DOM：<DIVのonClick = {} this.fn>アショカ教室</ div>
説明
1つのイベントの最初の文字を大文字にする必要があります
補間シンタックス、結合方法部品2〜
3イベントコールバック関数を実行することができない（パラメータセットを追加することはできません（））
2.7.1イベントのコールバック関数
2つの方法があり、オブジェクトのスコープは、コンポーネントのインスタンスになるように内部構成要素に関連付けられたメソッドイベントコールバックは、このデフォルト値は、定義されていません
まず、このオブジェクトのバインド方法ES5バインディングコンポーネントインスタンスのスコープを提供することによって
第二に、結合コンポーネント・インスタンス・オブジェクトのES6矢印関数スコープを提供することによって
ES6の構文では、我々はまた、他のオブジェクトに結合するが、お勧めできません
我々はスコープをバインドするとき、私たちは、カスタムパラメータを提供することができます
カスタムパラメータは、バインドメソッドを渡された場合、イベントオブジェクトは、最終的な表面に常にあります
矢印は、カスタムパラメータを渡すの関数である場合は、イベント、オブジェクトがどの位置に渡すことができます