React环境搭建
React是当下前端生态圈流行的框架之一,与Vue和Angular并称前端三架马车。今天,我们就一起来学习下React,今天的主要内容有。
- 利用React脚手架create-react-app搭建项目
- 编写一个React计数组件
利用React脚手架create-react-app搭建项目
这里笔者例举两种利用create-react-app搭建项目的方式
全局安装
npm i -g create-react-app
create-react-app my-app
cd my-app && npm start
npx安装
npx create-react-app my-app
cd my-app && npm start
这两种方案各有各的好处,我们先说全局安装吧。npm i -g create-react-app
只需要执行一次,后面你在任意目录执行create-react-app project
就可以创建一个react项目的脚手架,这免去了开发者很多配置的工作。npx安装需要的npm版本在5.2.0以上,它的原理大致是先去全局的node_modules下找找看有没有这个包,没有的话再去本地项目找找有没有这个包,还是没有就去远程拉一个最新的下来。
这两种笔者更倾向于使用第二种npx安装的方式。这里我给出两个理由,第一个,当下前端发展太快了,各种包库更新迭代的太快,如果你全局安装的话,用接地气的话感觉就是有点跟不上时代(PS: 除非是去那种网络不通的公司)。第二个,它有可能跟其他的全局包产生一个冲突,就以create-react-app
为例,如果你本地安装了yarn的全局包,你将有机会看到yarnpkg add --exact react react-dom react-scripts --cwd has failed
的错误,大致应该是没有用npm install
而是用yarn
导致的,这里删掉全局的yarn
包可以解决这个问题。
编写一个React计数组件
我们要实现这样一个组件,点击加号按钮数字加1,点击减号按钮数字减1。
我们先定义一个文件ClickCounter.js
, 这里的命名规范讲一下,类似于JAVA的导包com.ataola.utils
这种,用户的这个行为是点击,点击是为了计数。当然啦用户点击它还可以搞些别的事情,比如说报名啊,回到顶部等等等等,所以把Click放在前面,Counter放在后面。
JSX语法
即Javascript的语法扩展。扩展了以后,你可以把一坨HTML代码丢到Javascript里面来写。形如楼下这样。
render() {
return (
<div>
<button onClick={ this.Add }>Add</button>
<button onClick={ this.Reduce }>Reduce</button>
<div>Count: { this.state.count }</div>
</div>
)
}
在Render函数中,我们返回一段html代码,写着一个加一个减按钮,然后显示相应的包。
引入相应的组件包
import React, { Component } from 'react';
编写相关类
class ClickCounter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.Add = this.Add.bind(this);
this.Reduce = this.Reduce.bind(this);
}
Add() {
this.setState({ count: this.state.count + 1 });
}
Reduce() {
this.setState({ count: this.state.count - 1 })
}
render() {
return (
<div>
<button onClick={ this.Add }>Add</button>
<button onClick={ this.Reduce }>Reduce</button>
<div>Count: { this.state.count }</div>
</div>
)
}
}
暴露相应的类
export default ClickCounter;
在index.js中引入我们创建的类,并加入到渲染函数中
import ClickCounter from './ClickCounter';
ReactDOM.render(
<React.StrictMode>
<ClickCounter/>
</React.StrictMode>,
document.getElementById('root')
);
至此我们已经学会了搭建React项目,并能够设计简单的React组件。
问题思考
this.setState({ count: this.state.count + 1 });
这句我能不能修改成this.state.count++
?
这句话的意思翻译过来就是,我能不能直接手动挡操作state里面的变量?答案肯定是能写成那种形式,你能访问到那个对象,你给它加加有问题吗?但是从React设计理念上,这是非常暴力鲁棒的做法,你就想嘛,难道这个setState
是放着让你看哒,很显然不是的。因为React在设计state时候是异步的,当你调用setState
的时候,它会被放入异步队列中,所以它也不是马上去改变state里面的数据。而你这个加加的写法是同步的马上去修改,假如说哈,你的加法是用加加这种写法,然后你的减法是用setState()
这种,当你点击加的时候React,它心态崩了呀,它也不知道你想干嘛,它想干的是异步的事情,而你要干的是同步的事情,它疯了。。。。。
好在,现在的编译器啊、或者配合ESLint智能,它会巧妙地提示你Do not mutate state directly. Use setState() react/no-direct-mutation-stateDo not mutate state directly. Use setState() react/no-direct-mutation-state
,让你巧妙地避开这种违背框架设计理念的写法。
思考一下,Vue里面可不可以,当然是可以的啦。
具体的参考下楼下地址:
React demo1: https://github.com/ataola/react-Inkjet/tree/master/code/demo-1
Vue demo1: https://github.com/ataola/vue-Graffiti/tree/master/code/demo1
参考文献
《深入浅出React和Redux》 机械工业出版社 程墨 编著
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。