React中的hook 以及 router

hook

作用： 可以让我们在函数式组件中添加state,也可以让我们使用部分生命周期钩子函数

useState useEffect

  import React,{ useState,useEffect } from 'react'


  const Item = ( props ) => {
    return   <li> { props.content } </li>
  }

  function HookComponent () {
    let  [count,setCount ] = useState( 0 )
    let [ list, setList ] = useState( [
      {
        id: 1,
        content: '敲代码1'
      }
    ])

    // console.log( count , setCount )


    useEffect ( () => {
      //执行副作用的函数
      document.title = count
    })

    return (
      <div>
        hook
        <button onClick = { () => { setCount( count += 1 ) }}> + </button>
        <p> { count } </p>
        <hr/>
        <button onClick = { () => {
          let newList = list.push({
            id: list.length + 1,
            content: 'Gabriel Yan'
          }) // 返回值是数字
          setList( list.concat(newList))
        }}> list +  </button>
        <ul>
          {
            list.map( item => {
              return <Item { ...item } key = { item.id} />
            })
          }
        </ul>
      </div>
    )
  }


  export default HookComponent

总结：

1. useState可以让我们在函数式组件中定义一个state和一个用来修改state的方法
   let [ count,setCount ] = useState( count的初始值 )

2. useEffect可以让我们在函数式组件中使用一个副作用（ 事件的订阅、dom操作 ）
   不需清除的副作用：
   我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作

     import React, { useState, useEffect } from 'react';
   
     function Example() {
       const [count, setCount] = useState(0);
   
       useEffect(() => {
         document.title = `You clicked ${count} times`;
       });
   
       return (
         <div>
           <p>You clicked {count} times</p>
           <button onClick={() => setCount(count + 1)}>
             Click me
           </button>
         </div>
       );
   
   

   需要清除的
   例如订阅外部数据源

     import React, { useState, useEffect } from 'react';
   
     function FriendStatus(props) {
       const [isOnline, setIsOnline] = useState(null);
   
       /* 
         useEffect(() => {
           //1. 订阅事件源的代码
   
           return 2. 卸载事件源的代码
         }) 
        */
   
       useEffect(() => {
         function handleStatusChange(status) {
           setIsOnline(status.isOnline);
         }
   
         ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
         // Specify how to clean up after this effect:
         return function cleanup() {
           ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
         };
       });
   
       if (isOnline === null) {
         return 'Loading...';
       }
       return isOnline ? 'Online' : 'Offline';
     }
   
   

react router 4.0 react-router-dom

React router的模式：

1. HashRouter

• 老浏览器的history,通过hashchange事件来监听url的变化情况

2. BrowserRouter

• 新浏览器的history，借助了H5提供的createBrowserRouter来实现，通过监听popstate事件来实现

React router四个核心包

包名 Description
react-router React Router核心api
react-router-dom React Router的DOM绑定，在浏览器中运行不需要额外安装react-router
react-router-native React Native 中使用，而实际的应用中，其实不会使用这个。
react-router-config 静态路由的配置

使用流程演示

1. 安装两个依赖包
   $ yarn add react-router react-router-dom
2. 在入口文件index.js中使用router

      import { BrowserRouter as Router} from 'react-router-dom'
      ReactDOM.render(
        <Router>
          <App />
        </Router>
      , document.getElementById('root'));
   
   

3. Route上面的属性
4. NavLink 路由激活
5. exact 路径完全匹配 必须是一直的 / /home
6. 重定向组件 Redirect
7. 路由（ 当我们是 /category , 跳转 /categor/1 ） 路由组件可以通过componentWillReceiveProps compoenntDidMount来监听路由变化
8. App组件不是路由组件，不能监听路由的变化，使用非常规手段将App组件变成路由组件
   • 使用高阶组件 withRouter
9. Switch一定要写，它一次只渲染一个组件，如果不写，路由组件全部都会渲染出来
10. 动态路由
    1. 路由传参 Link/NavLink 组件身上的to属性来传递 to = {{pathname,search,hash,state}}
    2. 路由接参
       1. id: this.props.match.params.id
       2. search: 先用querystring将search转换成object

         const qs = require('querystring')
         let { search } = this.props.location // '？a=1&b=2'
         const { a, b } = qs.parse( search.slice(1) )
       

       3. state； this.props.location.state.xxx