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

2021-10-09 09:34:51 阅读：146 来源： 互联网

标签：ant console render react ui props 组件 import

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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：ant,console,render,react,ui,props,组件,import
来源： https://blog.csdn.net/bojikeqian/article/details/120664382

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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