1、什么是React？
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
2、React有哪些关键知识点？
网上有不少好教材，这里就不在做原理性的讲解，重点讲一下任何动手，“知道”没有意义，“做到”才有产生价值。
2.1、熟悉JSX语法
http://www.runoob.com/react/react-jsx.html
2.2、了解React组件的生命周期
http://www.runoob.com/react/react-component-life-cycle.html
2.3、了解React的数据组织方式
http://www.runoob.com/react/react-state.html
http://www.runoob.com/react/react-props.html
2、学习React的最好方法
动手
3、动手的最快方式
直接使用antd pro，环境搭建参考文章：https://www.jianshu.com/p/9a9acc4411ba?from=groupmessage&isappinstalled=0
4、教学示例
4.1、创建一个React组件ShopMgr
在src/pages目录下面新建文件ShopMgr.js，内容如下
import React, { PureComponent } from 'react';
export default class ShopMgr extends PureComponent {
render() {
return (
<div>你好，我是一个React组件</div>
);
}
}
4.2、将ShopMgr挂载到页面上
修改config/router.config.js，查找/dashboard/analysis，找到下面的代码段
{
path: '/dashboard/analysis',
name: 'analysis',
component: './Dashboard/Analysis',
}
将其修改为：
{
path: '/dashboard/analysis',
name: 'analysis',
component: './ShopMgr',
}
4.2、启动项目
$ npm start
在浏览器上输入http://127.0.0.1:8000/dashboard/analysis，你将会看到下面的页面：
React组件
4.3、练习对内部数据state的操作
-
初始化容器：
state = { count: 0 }; -
获取中的数据：
let { count } = this.state; -
修改容器中的数据：
this.setState({ count });
我们做一个计数器，作为练习工具：修改ShopMgr，为其增加一个显示器，两个按钮，分别进行加一减一操作
React组件2
import React, { Component } from 'react';
import { Alert, Button, Divider } from 'antd';
export default class ShopMgr extends Component {
/**
* 初始化内部数据容器，里面放上一个计数器count，初始值为0
* @type {{count: number}}
*/
state = { count: 0 };
/**
* 对计数器进行加一
*/
add = () => {
// 从内部容器中，获取计数器的值，count
let { count } = this.state;
// 计数器加一后，再将其放回容器，此时React会检测到容器中数据的变化，会自动刷新界面
count += 1;
this.setState({ count });
};
/**
* 对计数器进行减一
*/
sub = () => {
// 从内部容器中，获取计数器的值，count
let { count } = this.state;
// 计数器减一后，再将其放回容器，此时React会检测到容器中数据的变化，会自动刷新界面
count -= 1;
this.setState({ count });
};
render() {
// 从内部容器中，获取计数器的值，count
const { count } = this.state;
return (
<div>
{/* 显示计数器的值 */}
<Alert message={count} type="success" style={{ marginBottom: 20 }}/>
{/* 将上面定义的add和sub函数，设置到相关的按钮点击事件上 */}
<div>
<Button type="primary" onClick={this.add}>+1</Button>
<Divider type="vertical"/>
<Button type="primary" onClick={this.sub}>-1</Button>
</div>
</div>
);
}
}
4.4、练习对外部数据的操作
我们修改上面的例子，增加一个奇数判断器，作为计数器的子组件，计数器的内部count作为奇数判断器的外部数据。
-
获取外部数据
const { count } = this.props;
React组件3
import React, { Component } from 'react';
import { Alert, Button, Divider } from 'antd';
class IsOddNum extends Component {
render() {
const { count } = this.props;
let tips = `${count}是奇数`;
if (count % 2 === 0) {
tips = `${count}是偶数`;
}
return (
<Alert message={tips} type="info" style={{ marginBottom: 20 }}/>
);
}
}
export default class ShopMgr extends PureComponent {
/**
* 初始化内部数据容器，里面放上一个计数器count，初始值为0
* @type {{count: number}}
*/
state = { count: 0 };
/**
* 对计数器进行加一
*/
add = () => {
// 从内部容器中，获取计数器的值，count
let { count } = this.state;
// 计数器加一后，再将其放回容器，此时React会检测到容器中数据的变化，会自动刷新界面
count += 1;
this.setState({ count });
};
/**
* 对计数器进行减一
*/
sub = () => {
// 从内部容器中，获取计数器的值，count
let { count } = this.state;
// 计数器减一后，再将其放回容器，此时React会检测到容器中数据的变化，会自动刷新界面
count -= 1;
this.setState({ count });
};
render() {
// 从内部容器中，获取计数器的值，count
const { count } = this.state;
return (
<div>
{/* 显示计数器的值 */}
<Alert message={count} type="success" style={{ marginBottom: 20 }}/>
{/* 将上面定义的add和sub函数，设置到相关的按钮点击事件上 */}
<div style={{ marginBottom: 20 }}>
<Button type="primary" onClick={this.add}>+1</Button>
<Divider type="vertical"/>
<Button type="primary" onClick={this.sub}>-1</Button>
</div>
{/* 挂载子组件，将count传入其中 */}
<IsOddNum count={count}/>
</div>
);
}
}
4.4、跟踪组件的生命周期
观察IsOddNum的打印即可
import React, { Component } from 'react';
import { Alert, Button, Divider } from 'antd';
class IsOddNum extends Component {
componentWillMount() {
console.log('IsOddNum::componentWillMount');
}
componentDidMount() {
console.log('componentDidMount ');
}
componentWillReceiveProps(nextPropx) {
console.log('IsOddNum::componentWillReceiveProps ');
}
shouldComponentUpdate() {
console.log('IsOddNum::shouldComponentUpdate');
return true;
}
componentDidUpdate() {
console.log('IsOddNum::componentDidUpdate');
}
componentWillUnmount() {
console.log('IsOddNum::componentWillUnmount');
}
render() {
const { count } = this.props;
let tips = `${count}是奇数`;
if (count % 2 === 0) {
tips = `${count}是偶数`;
}
return (
<Alert message={tips} type="info" style={{ marginBottom: 20 }}/>
);
}
}
export default class ShopMgr extends Component {
/**
* 初始化内部数据容器，里面放上一个计数器count，初始值为0
* @type {{count: number}}
*/
state = { count: 0 };
/**
* 对计数器进行加一
*/
add = () => {
// 从内部容器中，获取计数器的值，count
let { count } = this.state;
// 计数器加一后，再将其放回容器，此时React会检测到容器中数据的变化，会自动刷新界面
count += 1;
this.setState({ count });
};
/**
* 对计数器进行减一
*/
sub = () => {
// 从内部容器中，获取计数器的值，count
let { count } = this.state;
// 计数器减一后，再将其放回容器，此时React会检测到容器中数据的变化，会自动刷新界面
count -= 1;
this.setState({ count });
};
render() {
// 从内部容器中，获取计数器的值，count
const { count } = this.state;
return (
<div>
{/* 显示计数器的值 */}
<Alert message={count} type="success" style={{ marginBottom: 20 }}/>
{/* 将上面定义的add和sub函数，设置到相关的按钮点击事件上 */}
<div style={{ marginBottom: 20 }}>
<Button type="primary" onClick={this.add}>+1</Button>
<Divider type="vertical"/>
<Button type="primary" onClick={this.sub}>-1</Button>
</div>
{/* 挂载子组件，将count传入其中 */}
<IsOddNum count={count}/>
</div>
);
}
}
网友评论