React.js
前言
本来学习了Vue.js之后，没有再想学习React.js。但是，又非常想使用阿里的ant design项目，为了不再纠结，还是用了一两天，进行了一些粗略的学习。
脚手架
下载create-react-app
cnpm install create-react-app -g
初始化项目
create-react-app react-demo
脚手架会优先使用yarn下载依赖
查看package.json
{
"name": "react-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
需要注意的是，我们发现依赖非常之少，没有看见，webpack，babel，学过Vue.js之后对这些东西是非常敏感的。
在scripts中，我们发现，构建脚本好像在使用一个叫react-scripts的东西，按照直觉，我们应该去看看这个包是干什么用的。
在node_modules中，我们找到react-scripts文件夹，结构如下：
bin
config
node_modules
scripts
package.json
README.md
在bin中我们发现有react-scripts.js,接收命令行参数。
在scripts中，我们发现有start.js，我们在里面发现了webpack， webpack-dev-server这些东西。
此时，解除了我们之前的疑惑，react-scripts将webpack等开发中使用的工具为我们进行了封装，是我们不必要直接接触，只需要使用react-scripts命即可。不得不说，这是对开发人员非常友好的。
运行项目
cnpm start
如果运行正常，将在3000端口起来一个HelloWorld。
React知识点
入口函数
ReactDOM.render(<App />, document.getElementById('root'));
将App组件渲染到root div中。
类似与Vue中：
new Vue({
el:"#id",
components:{
App.name:App
},
template:<app/>
});
JSX
使用React，jsx是我们避免不了的东西，虽然我也是非常不喜欢。但是，也没有办法...
简单记录一下
const element = <h1>Hello, world!</h1>;
const element = <img src={this.avatarUrl}></img>;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
组件
组件是我们构建应用的基本单元，在Vue中我们使用的是.vue的单文件组件，在React也类似，不过文件名还是.js。
组件基本模板
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<div>
</div>
);
}
}
export default MyComponent;
我们可以在VSCode中，安装相关插件，书写代码非常快。
可以看到，我们的自定义组件首先继承React的Component，在render方法中书写web骨架。
React数据三兄弟
我们在上面的代码中，敏感的发现有两个东西应该值得我们关注，那就是state和props。还有一个没有出现的是context。这些是比较重要的东西，我们一个一个介绍。
state
state用来维护界面view和模型的model的绑定。类似与vue中的data。
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
msg : 'hello react',
number:0
}
}
add = () => {
this.setState({
number:this.state.number + 1
});
}
render() {
return (
<div>
<p>{this.state.msg}</p>
<p>{this.state.number}</p>
<button onClick={this.add}>点我加1</button>
</div>
);
}
}
export default MyComponent;
this.state是一个json对象，使用时用{}表示引用变量。
当我们点击按钮后，界面上的数字将增加1。
需要注意的有：
- onClick中c大写。
- 自己的方法要写箭头函数，才能正确拿到this引用。
props
props用来处理父组件向子组件传参，vue中也是使用的同样的关键字。不过与vue中有非常大的不同。react中的props更加易用。
创建一个子组件
import React, { Component } from 'react';
class Child extends Component {
constructor(props) {
super(props);
console.log(props)
this.state = { }
}
render() {
return (
<div>
<p>{this.props.say}</p>
</div>
);
}
}
export default Child;
修改MyComponent.js
this.state = {
msg : 'hello react',
number:0,
say : 'hello child'
}
<Child say={this.state.say} />
这样，child组件就能接收并使用say变量。
需要注意的是，props并不是固定的，props作为构造函数的第一个参数传入，我们可以修改形参为其他的代号，也就说，如果我们这样：
constructor(p) {
super(p);
}
<p>{this.p.say}</p>
也是可行的，只不过我们一般都会使用props。见名知意。
现在我们来思考一个问题，刚才我们都是从父组件向子组件传递数据，那么子组件如何向父组件传递数据呢？以如上实例中，子组件如何控制父组件的数字加1操作呢？这里就要用到一些技巧了，我们来看：
我们大发脑洞，将add函数传给child。
<Child add={this.add}/>
在child中:
this.state = {
parantAdd : props.add
}
<button onClick={()=>{ this.state.parantAdd();}}>点我给父亲加1</button>
这样就实现了子组件控制父组件的view和model。大家可以体会一下。
context
比前两个用的少，暂且不介绍。
组件生命周期
老生常谈的问题，列举几个常用的，没有什么好说的。
- componentWillMount 渲染之前
- componentDidMount 第一次渲染之后
- componentWillUnmount 组件从DOM中被移除时。
再补充一下，使用组件只需引入后在需要的地方用<>来表示。
如App,就写<App/>。
React Router
react-router是react生态中的路由项目，最新版本是4.2。由于4.x是从2.x直接上来的，API变化较大。而且也没有比较好文档，官方的文档基本上是代码示例的堆砌，没有细节的解释。这一点，确实比vue-router做的要差一些。
下载
cnpm install react-router-dom --save
在根组件中注册
import {
BrowserRouter as Router,
Route,
Switch
} from 'react-router-dom';
import Welcome from './Welcome'
import NotFound from './NotFound'
Welcome.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import User from './User';
class Welcome extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<div>
<p>welcome page </p>
<Route path="/welcome/:userId" component={User}/>
</div>
);
}
}
export default Welcome;
welcome中使用到了嵌套路由。
User.js
import React, { Component } from 'react';
class User extends Component {
constructor(props) {
super(props);
this.state = {
userId : this.props.match.params.userId
}
}
render() {
return (
<div>
<p>id:{this.state.userId}</p>
</div>
);
}
}
export default User;
NotFound.js
import React, { Component } from 'react';
class NotFound extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<div>
<p>404 Not Found</p>
</div>
);
}
}
export default NotFound;
推荐在根组件中做路由分发时，写成如下结构形式：
<Router>
<Switch>
<Route path="/welcome" component={Welcome}/>
<Route path="/" component={Welcome} exact/>
<Route path="*" component={NotFound}/>
</Switch>
</Router>
