React核心知识

安装：

安装脚手架：cnpm i -g create-react-app

使用脚手架创建项目：create-react-app myapp

基础语法： 

• jsx语法的本质： 并不是直接把 jsx 渲染到页面上， 而是先转化成js对象， 然后由Reace.createElement 来创建节点对象
• jsx语法;

1. 是基于XML实现的一种 js语法扩展
2. 最外层只能由一个根标签, 所有的标签都需要有闭合
3. 重新定义特殊属性名, 例如 className代替 class, htmlFor代替for
4. 使用 {  } 声明js脚本, 只能使用声明式编程, 可以把完整的 jsx赋值给 js变量

• jsx的优点: 

1. jsx执行更快, 在编译为js 代码后进行了优化
2. 它的类型是安全的, 在编译过程中就能发现错误,
3. 使用 jsx 编写模板更加简单快捷

• React组件函数组件(形式上表现为一个只带render()方法的组件类, 通过箭头函数或者function声明)(也叫无状态组件)

1. 函数组件内部没有状态管理, 想要实现状态管理, 必须使用 Hooks
2. 函数组件内部没有声明周期, 没有 this 对象, 
3. 使用形参的方式接受props对象, 接收外界传值
4. 函数组件必须要返回一段 js 代码

• React类组件(有状态组件)

1. 使用 class 声明, 必须要继承React.Component 类
2. 类组件中必须要重写render()方法, 该方法就类似于一个函数组件
3. 内部有声明周期   
4. 实例方法中有this对象, 声明事件函数的时候, 注意 this 指向
5. 有状态, 使用 this.setState()修改状态

   // 声明函数组件
   import React from 'react'
   
   export default function App() {
       return (
           <div>
               
           </div>
       )
   }
   
   
   // 声明类组件
   import React, { Component } from 'react'
   
   export default class App extends Component {
       render() {
           return (
               <div>
                   
               </div>
           )
       }
   }
   
   // 类组件内部声明周期
   // 加载期
   componentWillMount     渲染前
   render                调用render方法, 渲染视图
   componentDidMount      渲染和
   
   // 更新期
   componentWillReciveProps     props更新
   shouldComponentUpdate        是否更新视图, true 更新, false 不更新
   componentWillUpdate            更新前
   render                        重新调用 render方法
   componentDidUpdate            更新后
   
   // 销毁期
   componentWillUnmount

 React-router-dom 路由管理:        

• 内置组件: 

1. <BroswerRouter>,    <HashRouter>, 把需要进行路由跳转的组件包裹
2. <link>   <Switch>  <Route>  <Redirect>
3. API: histroy: go, goBack(), replace(), location,  state                                                                location:  pathname,  state                                                                                                match:  params

redux状态管理 :

• 核心API:  createStore,         applyMiddleware,        combinReducers
• createStore 创建store对象

//1. 引入redux，解构 createStore
import { createStore } from 'redux'

//初始化的状态
const defaultState = {
    i: 0
}

//reducer是一个纯函数（返回值依赖于参数，并且对外界无副作用）
//参数1是state
//参数2是action，外界传来的要修改的新对象，action必须是一个普通对象，action对象中必须要有一个type属性，值为string类型，表示当前要做什么
const reducer = (state = defaultState,action)=>{
    
    return state
}


//2. 创建 store 对象，
//参数1是一个函数（reducer）用来接口外部传来的action
//参数2是默认的state状态
const store = createStore(reducer)

export default store

•  applyMiddleware, 

引入中间件, 可以使 dispatch 不止派发一个对象, 可以做一些异步操作

import {createStore,applyMiddleware} from 'redux'


// applyMiddleware 是一个方法需要调用
const store = createStore(reducer,applyMiddleware(thunk))

•  combinReducers: 用来整个各个模块中的 reducer

  import {createStore, combineReducers} from 'redux'
  // import {combineReducers} from 'react-redux'
  import goodsReducer from '../views/Goods/store/reducer'
  import userReducer from '../views/User/store/reducer'
  
  //整合所有的reducer
  const rootReducer = combineReducers({
      goods: goodsReducer,
      user: userReducer
  })
  
  const store = createStore(rootReducer)
  
  export default store