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 (
            <div>
                {this.state.data}
                接收到的props: {this.props.data}
                <button onClick={() => {this.handleClick()}}>更新组件</button>
            </div>
      
        )
    }
}

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 (
            <div>
                {
                    this.state.show ? <Child data={this.state.data}/> : null
                }
                <button onClick={() => {this.changeData()}}>改变子组件的props</button>
                <button onClick={() => {this.byeChild()}}></button>
            </div>
        )
    }
}

ReactDOM.render(
    <Father />,
    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 (
              <div>Component A</div>
          )
      }
  }
  class B extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>Component B</div>
          )
      }
  }
  class Wrapper extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>
                  <Link to="/a" >组件A</Link>
                  <br />
                  <Link to="/b" >组件B </Link>
                  {this.props.children}
              </div>
          )
      }
  }
  ReactDOM.render(
      <Router>
           <Wrapper>
              <Route path="/a" component={A}/>
              <Route path="/b" component={B}/>
          </Wrapper>
      </Router>
     ,
      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 (
              <div>
                  Component   A  
                  <Switch>
                      <Route 
                          exact // 必须完全符合path
                          path={`${this.props.match.path}`}
                          render={(route) => {
                              return <div>当前组件是不带参数的A</div>
                          }}
                      />
                     <Route >
                          path={`${this.props.match.path}/sub`}
                          render={(route) => {
                              return <div>当前组件是sub</div>
                          }}
                      />
                      <Route 
                      path={`${this.props.match.path}/:id`} // 通过路由地址解析
                      render={(route) => {
                          return <div>当前组件是带参数的A，参数是 : {route.match.params.id}</div>
                      }}/>
                  </Switch>
              </div>
          )
      }
  }
  class B extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>Component B</div>
          )
      }
  }
  class Wrapper extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>
                  <Link to="/a" >组件A</Link>
                  <br />
                  <Link to="/a/123" >带参数的组件A</Link> 
                  <br />
                  <Link to="/a/sub" >/a/sub子路径</Link>
                  <br />
                  <Link to="/b" >组件B </Link>
                  {this.props.children}
              </div>
          )
      }
  }
  
  ReactDOM.render(
      <Router>
           <Wrapper>
              <Route path="/a" component={A}/>
              <Route path="/b" component={B}/>
          </Wrapper>
      </Router>
     ,
      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'  // 引用某一个组件
  <Button>使用组件</Button>
  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 = /\.less$/;
const lessModuleRegex = /\.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里文件是将要被打包部署到服务器上。一般是图片等元素信息
。