React 基础知识

生命周期

• getDefaultProps :通过这个方法初始化一个属性
• getInitialState: 初始化当前组件的状态
• componentWillMount: 组件加载之前调用
• render: 渲染UI, 修改组件都会调用
• componentDidMount: 组件Dom插入完以后会调用
• componentWillReceiveProps: 父组件传递属性以后会调用
• shouldComponentUpdate: 组件更新的时候调用
• componentWillUpdate: 组件更新之前
• componentDidUpdate: 组件更新之后

• componentWillUnMount: 组件销毁

  
  
  react单个组件的生命周期

react-router4.0

react-router 和 react-router-dom理解

• 4.0版本不需要路由配置, 一切都是组件
• react-router: 提供了一些router的核心api, 包括router, route, switch等
• react-router-dom: 提供了BrowerRouter, HashRouter, Route, Link, NavLink

路由模块的安装

• npm install react-router-dom --save
• yarn add react-router-dom

react-router-dom核心用法

• HashRouter和BrowserRouter

1. http://localhost:3000/#/admin ----> HashRouter
2. http://localhost:3000/admin ----> BrowserRouter

• Route: path, exact, component, render

Route用法
1.
 
 
2. 

      
             

• NavLink, Link

Link
import {Link} from 'react-router-dom'
const Header= ()=> (

        

             
Home
        

)

• Switch

• Redirect

路由重定向: