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.
<Route path='/admin/ui/buttons' componenr={Buttons} /> 
<Route path='/admin/ui/modals' componenr={Modals} /> 
2. 
<Route path='/admin' render={()=>
      <Admin>
            <Route path='/admin/home' componenr={Home} /> 

• NavLink, Link

Link
import {Link} from 'react-router-dom'
const Header= ()=> (
<header>
        <nav>
             <li><Link to="/">Home</Link></li>
        </nav>
</header>
)

• Switch

<Swicth>
      <Route path='/admin/ui/buttons' componenr={Buttons} /> 
      <Route path='/admin/ui/modals' componenr={Modals} /> 
</Switch>

• Redirect

路由重定向: <Redirect to="/admin/home" />