React 、Vue、 Angular三大框架对比

React的特点:

1. JSX

2. 组件化

3. 虚拟dom

4. 单向绑定

5. 单向数据流

6. 声明式

Facebook 于2013年开源

React当前最新版: v16.4.0

关于开源协议

最流行的六种----GPL、BSD、MIT、Mozilla、Apache和LGPL。

React官方教程:

https://reactjs.org/tutorial/tutorial.html

教程最后做的Demo在线演示:

https://codepen.io/gaearon/pen/gWWZgR?editors=0010

React官方文档:

https://reactjs.org/docs/hello-world.html

包含基础教程+高级教程+API参考

React技术栈(sgt)

JSX (JavaScript XML)是js里面定义的一套XML语法

1. 第1个React

新建目录react_01

然后npm init -y

然后安装react (版本16.4.0)

npm install --save react react-dom @babel/standalone

如图所示:

1.1 @Babel/standalone及其作用

官网地址: 

https://www.babeljs.cn/docs/setup/#installation

使用babel,可以在浏览器中直接将ES6转成ES5

<!-- babel 第1步,引入 -->
<script type="text/javascript" src="node_modules/@babel/standalone/babel.js"></script>

<!-- 使用Babel第2步 -->
<script type="text/javascript">var inputString = 'const showGirl = () => "hello beyond,面码です"; console.log(showGirl())'// 使用Babel转换var outputString = Babel.transform(inputString,{presets: ['es2015']}).code// 使用eval执行转换后的字符串window.eval(outputString)
</script>

react_01.html 执行效果

或者,直接将script标签的type设置为text/babel

这样babel就可以实时对ES6的语法进行编译转换和运行了

<!-- 另一种使用babel的方式 -->
<script type="text/babel">const showGirl = () => "hello beyond,面码です"; console.log(showGirl())
</script>

执行效果是一样的

1.2 第一个React文件

代码如下:

<!-- 第1步,引入babel -->
<script type="text/javascript" src="node_modules/@babel/standalone/babel.js"></script>
<!-- 第2步,引入react和react-dom -->
<script type="text/javascript" src="node_modules/react/umd/react.development.js"></script>
<script type="text/javascript" src="node_modules/react-dom/umd/react-dom.development.js"></script>

<div id="id_div_react">这个是react组件未来的挂载点</div>

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)ReactDOM.render(<h2>hello beyond, 面码です</h2>,document.getElementById('id_div_react'))
</script>

效果如下:

通过babel在线编译https://www.babeljs.cn/repl/

我们发现JSX代码变成了下面的样子

JSX语法规则
1. 只能有一个根节点
2. 单标签必须使用 />闭合
3. 遇到以< 开头的,就用HTML规则解析
4. 遇到以{ 开头的,就用javascript规则解析

5. 允许直接在模板中插入一个JS变量,如果变量为数组,则展开数组添加所有成员到模板中

可以把render方法的参数1,用一个变量放到外面,如下所示

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)const item = <h2>hello beyond, 面码です</h2>ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

如果有多行,可以加括号,如下所示:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号const item = (<div><h2>hello beyond, 面码です</h2><p>あの日見た花の名前を僕達はまだ知らない</p></div>)ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

效果如下:

再次说明一下,为啥多行要用括号, 

因为若遇到return ,则当后面无内容时,在没有使用括号的时候,可能会直接返回

如下代码如

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnfunction getNode() {// 如果return 后面没有括号,则误以为可以直接return 了return (<div><h2>hello beyond, 面码です</h2><p>あの日見た花の名前を僕達はまだ知らない</p></div>)}const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

不同于Vue中的双大括号{{ }}

React中的数据绑定,使用的是 单大括号{ }

关于注释,则推荐使用JS的多行注释

 {/* 这是js的多行注释 */}

如下所示:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',girlAge: 13,lover: 'beyond'}function getNode() {// 如果没有括号,则误以为可以直接return 了// 遇到 < 就会以html来解析// 遇到 { 就会以js来解析return (<div>   {/* 这个是js的多行注释 */}<p>{6 + 7}</p><p>{'未闻花名'}</p><h2>{`hello ${girl.lover}`}</h2><h2>{girl.girlName + 'です'}</h2><p>{girl.girlAge}岁,{girl.girlAge <= 14 ? 'loliです':'loliじゃない'}</p></div>)}const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

效果如下:

在JS的if-else语句中返回不同的html节点 (类似于Vue中的指令所实现的功能)

如下所示: 

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',girlAge: 13,lover: 'beyond'}function getNode(user) {// 如果没有括号,则误以为可以直接return 了// 遇到 < 就会以html来解析// 遇到 { 就会以js来解析if(!user){return (<p> hello visitor </p>)}else{return (<div>{/* 这个是js的多行注释 */}<h2>{`hello ${user.lover}`}</h2><h2>{user.girlName + 'です'}</h2><p>{user.girlAge}岁,{user.girlAge <= 14 ? 'loliです':'loliじゃない'}</p></div>)}			}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode(girl)ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

效果如下:

JSX中节点的属性值
动态绑定属性值
1. 单标签必须闭合
2. 属性值 直接 写{}, 不用写引号
const element = <img src={girl.headImgUrl} alt={girl.girlName} />


3. 一些与js关键字冲突的属性名要特殊处理
例如:class --> className
for --> htmlFor
tabindex --> tabIndex
例如:
const element = (
<div className="class_div" title={girl.girlName}>
<label htmlFor="id_input_name">芳名</label>
{/* JSX 单标签 必须闭合 */}
<input type="text" id="id_input_name" placeholder={girl.girlName}/>
</div>

)

代码如下:

<head>
<!-- 第1步,引入babel -->
<script type="text/javascript" src="node_modules/@babel/standalone/babel.js"></script>
<!-- 第2步,引入react和react-dom -->
<script type="text/javascript" src="node_modules/react/umd/react.development.js"></script>
<script type="text/javascript" src="node_modules/react-dom/umd/react-dom.development.js"></script><style type="text/css">.class_div {background-color: teal;color: white;}
</style>
</head>
<body><div id="id_div_root"><div id="id_div_react">beyond</div><!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',girlAge: 13,lover: 'beyond'}var logoImgUrl = 'http://vwhm.net/beyond.jpg'var logoText = '未闻花名'function getNode(user) {// 如果没有括号,则误以为可以直接return 了// 遇到 < 就会以html来解析// 遇到 { 就会以js来解析if(!user){return (<img src={logoImgUrl} alt={logoText} />)}else{return (<div className="class_div" title={girl.girlName}><label htmlFor="id_input_name">芳名</label>{/* JSX 单标签 必须闭合 */}<input type="text" id="id_input_name" placeholder={girl.girlName}/></div>)}			}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode(girl)ReactDOM.render(item,document.getElementById('id_div_react'))
</script>
</body>

效果如下:

不传递参数时,返回的element是一个img

传递参数时,返回的是一个带输入框的div

JSX默认情况下, 能够自动阻止注入攻击

如下所示:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',girlAge: 13}function getNode () {return (<div>{'<h2>自动禁止注入攻击,按原样输出</h3>'}</div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

运行结果:

如果实在要输出html的效果,可以这样写:

这次原样输出了html,并且也没有将id_div_react进行替换

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',girlAge: 13}function getRawHTML () {return {__html: '<p style="color: teal;">妳好  · 面码</p>'}}function getNode () {return <div dangerouslySetInnerHTML={getRawHTML()} />}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

这次原样输出了html,并且也没有将id_div_react进行替换

效果如下: 

JSX中特殊的 DOM Attribute

https://reactjs.org/docs/dom-elements.html

比如 checked属性 必须换成 defaultChecked

比如 value属性 必须换成 defaultValue

比如 class属性 必须换成 className

比如 dangerouslySetInnerHTML属性

比如 label标签的属性for 必须换成 htmlFor

比如 

function getNode () {return (<div>{ /* 必须闭合单标签 */}Loli:<input type="checkbox" defaultChecked /></div>)
}

function getNode () {return (<div>{ /* 必须闭合单标签 */}Loli:<input type="text" defaultValue={girl.girlName}  /></div>)
}

列表循环:

JSX允许在模板中插入变量,如果变量为数组,则会直接展开

如下所示:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girlArr = [<li key="1">面码</li>,<li key="2">mathilda</li>,<li key="3">逢坂大河</li>]function getNode () {return (<div><ul>{girlArr}</ul></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

效果如下:

下面代码的运行效果也是一样的,但是不推荐使用forEach

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girlArr = [{girlName: '面码',girlAge: 15},{girlName: 'mathilda',girlAge: 12},{girlName: '逢坂大河',girlAge: 16}]// 先生成elementArr (不推荐forEach)const elementArr = []girlArr.forEach((item,i) => {elementArr.push(<li key={i}>{item.girlName}</li>)} )function getNode () {return (<div><ul>{elementArr}</ul></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

推荐使用map直接生成新的数组,效果也是一样的

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girlArr = [{girlName: '面码',girlAge: 15},{girlName: 'mathilda',girlAge: 12},{girlName: '逢坂大河',girlAge: 16}]// 先生成elementArr (推荐map直接生成新的数组)const elementArr = girlArr.map((item,i) => {return <li key={i}>{item.girlName}</li>})function getNode () {return (<div><ul>{elementArr}</ul></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

在标签中动态生成elementArr, 但不推荐

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girlArr = [{girlName: '面码',girlAge: 15},{girlName: 'mathilda',girlAge: 12},{girlName: '逢坂大河',girlAge: 16}]function getNode () {return (<div><ul>{/*在标签中动态生成新的数组,不推荐*/girlArr.map((item,i) => {return <li key={i}>{item.girlName}</li>})}</ul></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

事件绑定注意事项:

1.  必须是驼峰命名法onClick,不能是onclick
2.  必须是一个函数(或匿名函数)

3.  必须写在{}里, 不能是""

代码如下:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girlArr = [{girlName: '面码',girlAge: 15},{girlName: 'mathilda',girlAge: 12},{girlName: '逢坂大河',girlAge: 16}]function btnClicked () {window.alert('hello beyond')}/*事件绑定注意事项:1.  必须是驼峰命名法onClick,不能是onclick2.  必须是一个函数(或匿名函数)3.  必须写在{}里, 不能是""*/function getNode () {return (<div><button onClick={btnClicked}>点我试试</button><button onClick={ function(){window.alert('hello')} }>点我试试</button><button onClick={ ()=>{window.alert('hi')} }>点我试试</button></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

组件:

https://reactjs.org/docs/components-and-props.html

React 可以将代码封装成 组件,
然后像插入html标签一样,插入组件


组件规则:
1. 首字母必须大写
2. class 类型的组件,必须实现render方法
3. 只有一个根节点
4. 组件属性 可以通过 参数props获取
函数组件 需要声明参数: props
class组件 可直接通过this.props获取




函数式组件(无状态)

首字母必须大写(如果小写,会被当成html来解析)

无状态组件:

// 1. 组件首字母必须大写// 2. 返回html元素// 3. 声明参数propsfunction AppHeader (props) {return (<div className="class_div_header"><p>头部</p><p>hello {props.name}</p></div>)}

有状态组件:

// 有状态组件class AppFooter extends React.Component {// 1. 必须实现构造方法constructor(){// (构造方法里必须先调用父类的构造方法)super()// 保存驱动视图的datathis.state = {author: 'beyond'}// 2秒后,更改数据,看看是否驱动了视图setTimeout(() => {console.log('2秒到了')// 这样写没有效果,必须使用set方法// this.state.author = '未闻花名'this.setState({author: '未闻花名'})},2000)}// 2.必须实现render方法render () {return (<div className="class_div_footer"><p>底部</p><p>Powered by {this.state.author}</p></div>)}}

代码如下:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',age: 15,lover: 'beyond'}// 1. 组件首字母必须大写// 2. 返回html元素// 3. 声明参数propsfunction AppHeader (props) {return (<div className="class_div_header"><p>头部</p><p>hello {props.name}</p></div>)}function AppLeftSider (props) {return (<div className="class_div_left_sider"><p>左侧边栏</p></div>)}function AppMain (props) {return (<div className="class_div_main"><p>右侧正文</p></div>)}// 有状态组件class AppFooter extends React.Component {// 1. 必须实现构造方法constructor(){// (构造方法里必须先调用父类的构造方法)super()// 保存驱动视图的datathis.state = {author: 'beyond'}// 2秒后,更改数据,看看是否驱动了视图setTimeout(() => {console.log('2秒到了')// 这样写没有效果,必须使用set方法// this.state.author = '未闻花名'this.setState({author: '未闻花名'})},2000)}// 2.必须实现render方法render () {return (<div className="class_div_footer"><p>底部</p><p>Powered by {this.state.author}</p></div>)}}function getNode () {return (<div><AppHeader name={girl.girlName}/><AppLeftSider /><AppMain /><AppFooter /></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

效果如下:

关于ES6中 class 的一点小补充

class Person {// constructor 就是类的构造函数// 通过constructor这个特殊关键字,来充当构造函数// 当new Person()时, 构造函数将被自动调用constructor(name) {this.name = name}sayHi() {// 实例方法,可以直接通过this来访问实例对象的成员属性console.log('hello ' + this.name)}// static关键字表示静态方法,必须使用类名调用,不能用类名调用// Person.add(6, 7)add(a,b) {return a + b}
}// 子类
class Girl extends Person {// 如果子类不写constructor方法则罢// 一旦写了constructor方法,必须第1行调用super()constructor(name,age) {super(name)this.age = age}greeting() {console.log('hi ' + this.name + ' ' + this.age + '岁')}
}const p = new Person('eva')
p.sayHi()
const mm = new Girl('面码',15)
mm.sayHi()
mm.greeting()

效果如下:

class 定义的有状态的组件

https://reactjs.org/docs/state-and-lifecycle.html

注意:  1. 事件处理函数中默认this为window;可以通过bind来指定this为组件

        2. 必须setState({key: newValue}})来修改驱动视图的ViewModel的值

代码如下:

<!-- 使用react第3步 -->
<script type="text/babel">// React完全组件化,并且不支持DOM模板// JSX语法// 参数1: 直接写html// 参数2: 目标element将被完全覆盖 (不支持DOM模板)// 可以用变量// 若有多行,可以用括号,主要是为了防止returnvar girl = {girlName: '面码',age: 15,lover: 'beyond'}// 有状态组件class AppMain extends React.Component {// 1. 必须实现构造方法constructor(){// (构造方法里必须先调用父类的构造方法)super()// 保存驱动视图的datathis.state = {author: 'beyond'}}btnClicked() {// 1. 默认处理事件的方法里this为window// 2. 可以通过bind()来绑定this为组件对象// 3. 必须使用setState来修改驱动视图的ViewModel的值this.setState({author: '未闻花名'})}// 2.必须实现render方法render () {return (<div><h3>{this.state.author}</h3><button onClick={this.btnClicked.bind(this)}>点我试试</button></div>)}}function getNode () {return (<div><AppMain /></div>)}// 不传参数 跟 传递参数// 返回的 节点内容是不相同的// 类似于Vue中的v-if指令const item = getNode()ReactDOM.render(item,document.getElementById('id_div_react'))
</script>

效果如下:

bind函数, 可以预传参数多个

代码如下:

function fn(a,b,c,x,y,z) {console.log(a,b,c)console.log(x,y,x)
}
// bind的同时传递参数: 预传参在参数列表最前面,并不会立即调用
var newFunction = fn.bind(this,1,2,3)
// 真正调用的时候,传递的参数会放到后面
newFunction(5,6,7)

效果如下:

关于bind函数中的this问题

代码如下:

<button id="id_btn">点我试试</button><script type="text/javascript">var btnNode = document.getElementById('id_btn')var girl = {girlName: '面码',girlAge: 15}// 只是绑定,并不立即执行// 只有等到点击的时候,才执行绑定后的函数btnNode.onclick = (function(){console.log(this)}).bind(girl)</script>

下面代码与上面的代码效果是等价的

<button id="id_btn">点我试试</button><script type="text/javascript">var btnNode = document.getElementById('id_btn')var girl = {girlName: '面码',girlAge: 15}function btnClicked(){console.log(this)}// 只是绑定,并不立即执行// 只有等到点击的时候,才执行绑定后的函数var newFunction = btnClicked.bind(girl)btnNode.onclick = newFunction</script>

效果如下:

React事件绑定的三种方式: 

代码如下:

                btnClicked() {console.log(this)}// 2.必须实现render方法render () {return (<div><h3>{this.state.author}</h3>{/* 第1种情况:事件处理函数内部this是window */}<button onClick={this.btnClicked}>点我试试1</button>{/* 第2种情况:事件处理函数内部this是绑定了的this而bind的this是组件对象*/}<button onClick={this.btnClicked.bind(this)}>点我试试2</button>{/* 第3种情况:箭头函数里的this是父级的this,即组件对象因此,可以调用btnClicked方法事件处理函数内部this是组件对象*/}<button onClick={(event) => {this.btnClicked(event)}}>点我试试3</button></div>)}

效果如下:

this 与 参数的注意事项

1. <button onClick={this.btnClicked}>点我试试</button>
this 指向的是window
只能接收一个默认的event事件对象

2.1 <button onClick={this.btnClicked.bind(this)}>点我试试</button>
this 指向的是组件实例

默认接收一个event事件对象

如下所示

btnClicked(event) {

console.log(event)

}

2.2 <button onClick={this.btnClicked.bind(this,girl.girlName,girl.girlAge)}>点我试试</button>

this 指向的是组件实例
参数1 是 girl.girlName
参数2 是 girl.girlAge

参数3 是 event事件对象(在参数列表的最后)

如下所示:

btnClicked(girlName,girlAge,event) {
console.log(girlName,girlAge,event)

}

3. <button onClick={(event) => {this.btnClicked(event,girl.girlName,girl.girlAge)}}>点我试试</button>

this 指向的是组件实例
手动传递event参数 和 其他多个参数

参数的顺序 按传递的顺序排列

如下所示:

btnClicked(event,girlName,girlAge) {
console.log(event,girlName,girlAge)

}

下一篇文章,就开始使用React实现TodoMVC

未完待续,下一章节,つづく