react项目整理react基础+react全家桶+ant-ui知识基础篇(三)

react生命周期
getDefaultProps // 初始化props属性，props来自其他组件
getInitialState // 初始化组件的状态
componentWillMount // 组件加载之前
render // 渲染
componentDidMount // 组件dom插入之后
componentWillReceiveProps // 接受父组件的传递
shouldComponentUpdate // 组件的更新处罚
componentWillUpdate // 组件要更新前
componentDidUpdate // 组件更新后
componentWillUnmount // 组件的销毁

Mounting : 挂载阶段

Updating: 运行时阶段

Unmounting: 卸载阶段

Error Handling: 错误处理

import React from ‘react’
import ReactDOM from ‘react-dom’

import ‘./index.scss’

class Child extends React.Component{
// 构造函数
constructor (props) {
super(props)
this.state = {
data: ‘oldzhuzhu’
}
console.log(‘这里是初始化数据constructor’)
}
componentWillMount () {
// 组件渲染前
console.log(‘componentWillMount’)
}
componentDidMount () {
// 组件渲染结束
console.log(‘componentDidMount’)
}
componentWillReceiveProps () {
// 将要接受父组件传来的props触发
console.log(‘componentWillReceiveProps’)
}
shouldComponentUpdate () {
// 子组件是不是应该更新
console.log(‘shouldComponentUpdate’)
return true
// 如果是false，后面的update就不会跟着更新
}
componentWillUpdate () {
// 组件将要更新
console.log(‘componentWillUpdate’)
}
componentDidUpdate () {
// 组件更新完成
console.log(‘componentDidUpdate’)
}
componentWillUnmount () {
// 组件将要销毁调用
console.log(‘componentWillUnmount’)
}
// 点击事件
handleClick () {
console.log(‘这里是更新数组’)
this.setState({
data: ‘zhuzhuzhu’
})
}
// 渲染
render () {
console.log(‘render’)
return (

{this.state.data}
接收到的props: {this.props.data}
<button onClick={() => {this.handleClick()}}>更新组件

)
}

}

class Father extends React.Component{
constructor (props) {
super(props)
this.state = {
data: ‘old props’
}
}
changeData () {
this.setState({
data: ‘new props’,
show: true
})
}
byeChild () {
this.setState({
show: false
})
}
render () {
return (

{
this.state.show ? : null
}
<button onClick={() => {this.changeData()}}>改变子组件的props
<button onClick={() => {this.byeChild()}}>

)
}
}

ReactDOM.render(
,
document.getElementById(‘app’)
)
按顺序输出值：

constructor // 构造函数初始化
componentWillMount // 组件渲染前
render // 组价渲染
componentDidMount // 选件渲染完成
componentWillReceiveProps // 子组件接收到父组件传来的props
shouldComponentUpdate // 是否组件进行更新，true更新，false接下来的周期不触发
componentWillUpdate // 组件更新前
render // 更新
componentDidUpdate // 组件更新结束
componentWillUnmount // 组件被摧毁之前
react-router
1.router几种方式
页面路由

window.location.href = ‘地址’ // www.baidu.com
history.back() //回退
hash 路由

window.location = ‘#hash’
window.onhashchange = function () {
console.log(‘current hash’ + window.location.hash)
}
h5路由

history.pushState(‘name’, ‘title’, ‘/path’) // 推进一个状态
history.replaceState(‘name’, ‘title’, ‘/path’) // 更换一个状态
window.onpopstate = function () {
console.log(window.location.href)
console.log(window.location.pathname)
console.log(window.location.hash)
console.log(window.location.search)
}
2. react-router几种方式
hash

import React from ‘react’
import ReactDOM from ‘react-dom’
import {HashRouter as Router,Route,Link} from ‘react-router-dom’ // 这里是Hash

import ‘./index.scss’

class A extends React.Component {
constructor (props) {
super(props)
}
render () {
return (

Component A
)
}
}
class B extends React.Component {
constructor (props) {
super(props)
}
render () {
return (
Component B
)
}
}
class Wrapper extends React.Component {
constructor (props) {
super(props)
}
render () {
return (

组件A

组件B
{this.props.children}

)
}
}
ReactDOM.render(

,
document.getElementById(‘app’)
)
browser

如果改成
import {BrowserRouter as Router,Route,Link} from ‘react-router-dom’
路径地址都会变成 http://localhost:8080/a，
此时请求的是后端代码，在复制这个链接在其他页面打开时，会报成404，因为后台并没有生成这个地址
3.router传参，组件接受不同组件传参
引入switch
import {HashRouter as Router,Route,Link,Switch} from ‘react-router-dom’
class A extends React.Component {
constructor (props) {
super(props)
}
render () {
return (

Component A

<Route
exact // 必须完全符合path
path={ ${this.props.match.path}}
render={(route) => {
return 当前组件是不带参数的A
}}
/>

path={ ${this.props.match.path}/sub}
render={(route) => {
return 当前组件是sub
}}
/>
<Route
path={ ${this.props.match.path}/:id} // 通过路由地址解析
render={(route) => {
return 当前组件是带参数的A，参数是 : {route.match.params.id}
}}/>

)
}
}
class B extends React.Component {
constructor (props) {
super(props)
}
render () {
return (
Component B
)
}
}
class Wrapper extends React.Component {
constructor (props) {
super(props)
}
render () {
return (

组件A

带参数的组件A

/a/sub子路径

组件B
{this.props.children}

)
}
}

ReactDOM.render(

,
document.getElementById(‘app’)
)
开始正式共享单车项目知识点（react全家桶+ant ui 组件+公共机制封装）
地址：https://github.com/yangxinjian/reactAntBike.git

react基础知识，生命周期（见上部分的基础知识点）
router4.0
redux集成开发
ant最实用基础组件
ant栅格系统
Etable组件封装
BaseForm组件封装
表格内嵌单选，复选封装
axios请求插件封装
api封装
错误拦截
权限，菜单封装等
地图，图表的使用
安装脚手架（上述有步骤，可选择自己搭建，也可以使用官方脚手架）
sudo cnpm install -g create-react-app

初始化项目
create-react-app bikesystem (你项目的名称：注意不用大写字母)

安装react-router
yarn add react-router

启动项目
yarn start

项目所需要的插件
安装react-router，axios
安装AntD
暴露webpack配置文件
安装less-loader
修改less-loader
sudo yarn add react-router-dom axios less-loader
sudo yarn add less
sudo yarn antd (支付宝做的ui组件)
引用antd样式

import {Button} from ‘antd’ // 引用某一个组件
使用组件
import ‘antd/dist/antd.css’
想要按需加载对应组件css，需要安装babel，安装后就无需引用上面的css
sudo yarn add babel-plugin-import
sudo yarn add less@^2.7.3
在package.json 的babel下加入
“plugins”: [
[
“import”,
{
“libraryName”: “antd”,
“style”: “css”
}
]
]
暴露webpack文件，得到config文件夹

sudo yarn eject
更改config/webpack.config.js ，使项目能识别less文件，配置后重启生效

在 // style files regexes下添加
const lessRegex = /.lessKaTeX parse error: Can't use function '\.' in math mode at position 29: …ModuleRegex = /\̲.̲module\.less/;
在 cssRegex引用后面下添加less配置对象
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3, // 这里不要与其他配置的数字一样
sourceMap: isEnvProduction && shouldUseSourceMap,
},
‘less-loader’
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3, // 这里不要与其他配置的数字一样
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
‘less-loader’
),
},
项目架构
在src中新建组件文件夹，取名component,分别根据项目搭建出header头部文件夹，footer底部文件夹，NavLeft左菜单文件夹，以及在src下新建admin.js

Jietu20190401-163524.jpg

在admin.js中配置主结构，用row，col，并引入三个外部组件，注意！！！三个外部组件的内容不能为空，否则会报错

  import React from 'react'
 import { Row, Col} from 'antd';
 import Header from './components/header';
 import Footer from './components/footer';

 export default class Admin extends React.Component{
     render () {
         return (
             <Row>
                 <Col span="3">
                     left
                 </Col>
                 <Col span="21">
                     <Header>
                         header
                     </Header>
                     <Row>
                         contet
                     </Row>
                     <Footer>
                         footer
                     </Footer>
                 </Col>
            </Row>
         )
     }
 }

作为主要的菜单结构，单独封装出一个js，写在了config下的menuConfig.js中，请大家自行git clone 我的项目地址，本项目是开源的项目

public里文件是将要被打包部署到服务器上。一般是图片等元素信息

作者：送你一堆小心心
链接：https://www.jianshu.com/p/040da8e83b7e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原文地址：https://blog.csdn.net/bojikeqian/article/details/120664382

react项目整理react基础+react全家桶+ant-ui知识基础篇(三)

相关推荐