react学习总结

特点总结：声明式设计，高效，灵活，独特的JSX语法，组件化，单向数据流

JSX：是一种类XML语言，全称是javascript XML，react可以不使用JSX来编写组件，但使用JSX可以让代码可读性更高，语义更清晰，对React元素进行抽象等等。

es5定义组件：

	var MyComponent = React.createClass({
		getInitialState: function(){
			return {
				val: "",
				login: true
			}
		},
		render: function(){
			return (
				<div>My name is Lin!</div>
			)
		}
	})

ES6中直接用class定义组件，并去掉了getInitialState这个hook函数，规定state在constructor中实现；

react-router

后端路由：通过不同的url路径和请求方式做出不同的响应；

前端路由：通过路径或hash的改变来动态的加载不同的组件到指定的位置；

一个项目中会有很多个不同的页面，每个页面是一个组件，不过一般都直接称为页面pages，每个页面是由一些子组件组成components；

react-router-dom 是专于web中使用的，react-router一般在native中使用，同样也支持web；

搭好react开发环境后，安装router插件：cnpm i react-router-dom --save，在入口文件中导入（最外层组件）

import {
  BrowserRouter as Router, //表示用路径模式的路由，哈希模式：hashRouter，路由的最外层
  Route, //路由切换的坑
  Link,   //模板切换的组件
  NavLink, //升级版link
  Switch, //只匹配一个组件
  Redirect //当没有一个匹配的时候，希望默认跳到哪去，使用<Redirect to/>组件exact表示只有是path的路径才匹配 ，还需要结合<Switch />默认只匹配一个。
} from 'react-router-dom';

页面导航：

   <Link to={{
     pathname: '/course',//跳转的路径
     search: '?sort=name',//挈带的search参数
     state: { price: 18 }//在另一页面通过this.props.location.state.参数名 获取
   }} />

Link组件，to参数可以接字符串，对象;replace属性是替换当前的链接true/false，不生成历史记录
NavLink：可以添加激活状态的class，通过activeClassName添加，strict：true，访问的地址严格匹配激活状态才有效，isActive: func，激活后携带match, location参数

js导航：使用history对象，此对象在route组件的props中，通过this.props.history获取； 
       this.history.push(path, [state]) state可选传参，在另一页面通过也是this.props.location.state.参数名 获取
       this.history.replace 跟push一样用法， 只是无历史记录

       this.history.goBack() 回到上一页

参数传递和获取：

方式 一：

        1.路由表中      

              <Route path=' /user/:id '   component={User}></Route>　　　　　　　

        2.Link处        

             HTML方式

                 <Link to={ ' /user/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>          　　　　　　　　　　　

           JS方式

                this.props.history.push(  '/user/'+'2'  )

        3. user页面       

               通过  this.props.match.params.id        就可以接受到传递过来的参数（id）

  方式 二：

          通过query

                前提：必须由其他页面跳过来，参数才会被传递过来

　　　     注：不需要配置路由表。路由表中的内容照常：<Route path='/user' component={User}></Route>

        1.Link处      

          HTML方式

            <Link to={{ pathname: ' / user' , query : { day: 'Friday' }}}>　　　　　　　

        JS方式

            this.props. history.push({ pathname : '/ user' ,query : {  day: 'Friday'} })

 

        2. user页面     

              this.props.location.query.day                            

  方式 三：

         通过state

            同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏

        1.Link 处      

           HTML方式：

                <Link to={{ pathname : ' /user' , state : { day: 'Friday' }}}>                    　　

         JS方式：

            this.props.history.push({ pathname:'/user',state:{ day : 'Friday' } })

                              　　  

        2. user页面       

            this.props.location.state.day

重定向和404处理：当路由没有一个匹配的时候，默认跳到哪里去，<Redirect path= to=/ exact> path可选，如果设了exact就要设path，表示dan 。还需要结合<Switch />默认只匹配一个。

离开提示Prompt组件：，when：bool，通过设定条件是否启用它。message=字符串/func；

<Redirect>组件：用于路由的跳转

<Route path="inbox" component={Inbox}>
  {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

<IndexRedirect> 组件：

<Route path="/" component={App}>
  ＜IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>    //用户访问根路径时，将自动重定向到子组件welcome

组件切换过度：原理是在组件进入和离开状态的时候动态添加类
   下载并导入 import { CSSTransitionGroup } from 'react-transition-group'
    transitionName：规定动画过度的类名，xx-enter：进入的初始类，fade-enter-active下一帧会添加，整个动画周期都在。

    transitionEnterTimeout/transitionLeaveTimeout：进入/离开的时间

代码分割（组件的异步加载）：从主bundle中抽离首屏不需要的代码和组件，按需加载（异步）
   1：使用import（）
   2：使用react-loadable插件
      import Loadable from 'react-loadable'; //加载插件
      const User = Loadable({
        loader: () => import('./pages/User'),//异步加载的组件
        loading: () => <div>Loading...</div> //加载的过程中使用哪个组件
      });