项目开发环境搭建
安装typescript
npm install -g typescript
1.脚手架全局安装
npm install -g yarn create-react-app
2.利用脚手架创建js项目
npx create-react-app my-app
3.利用脚手架创建ts项目
create-react-app my-app --typescript
(但是由于 AntD 是基于 less 文件开发的,而脚手架创建的项目是不识别 less 文件的,所以要针对 less 文件解析进行配置。)
6.修改 webpack.config.js 文件
react 生命周期
关闭webpack打包源文件映射
yarn add cross-env -D
“homepage”:"/pc/",
修改公共基础路劲
https://www.jianshu.com/p/36efe1dc2f5e
打包发布
npm run build
npm install -g serve
serve build
访问 http://localhost:5000
初始化 ts 配置文件
tsc --init
react生命周期函数
React生命周期函数:
组件加载之前,组件加载完成,以及组件更新数据,组件销毁。
触发的一系列的方法 ,这就是组件的生命周期函数
组件加载的时候触发的函数:
constructor 、componentWillMount、 render 、componentDidMount
组件数据更新的时候触发的生命周期函数:
shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
你在父组件里面改变props传值的时候触发的:
componentWillReceiveProps
组件销毁的时候触发的:
componentWillUnmount
必须记住的生命周期函数:
*加载的时候:componentWillMount、 render 、componentDidMount(dom操作)
更新的时候:componentWillUpdate、render、componentDidUpdate
*销毁的时候: componentWillUnmount
*/
import React, { Component } from 'react';
class Lifecycle extends Component {
constructor(props) {
console.log('01构造函数');
super(props);
this.state = {
msg:'我是一个msg'
};
}
//组件将要挂载的时候触发的生命周期函数
componentWillMount(){
console.log('02组件将要挂载');
}
//组件挂载完成的时候触发的生命周期函数
componentDidMount(){
//dom操作放在这个里面 请求数据也放在这个里面
console.log('04组件将要挂载');
}
//是否要更新数据 如果返回true才会执行更新数据的操作
shouldComponentUpdate(nextProps, nextState){
console.log('01是否要更新数据');
console.log(nextProps);
console.log(nextState);
return true;
}
//将要更新数据的时候触发
componentWillUpdate(){
console.log('02组件将要更新');
}
//组件更新完成
componentDidUpdate(){
console.log('04组件数据更新完成');
}
// 你在父组件里面改变props传值的时候触发的
componentWillReceiveProps(){
console.log('父子组件传值,父组件里面改变了props的值触发的方法')
}
setMsg=()=>{
this.setState({
msg:'我是改变后的msg的数据'
})
}
//组件销毁的时候触发的生命周期函数 用在组件销毁的时候执行操作
componentWillUnmount(){
console.log('组件销毁了');
}
render() {
console.log('03数据渲染render');
return (
<div>
生命周期函数演示--- {this.state.msg}-----{this.props.title}
<br />
<br />
<button onClick={this.setMsg}>更新msg的数据</button>
</div>
);
}
}
export default Lifecycle;