react基础

一、脚手架创建项目

    creat-react-app project

二、脚手架配置代理

    // 一个代理服务器
    package.json  proxy:'http://a.kr01.net'

    // 多个代理服务器
    //src下面创建setupProxy.js,如下
    const proxy =  require('http-proxy-middleawre')
    
    module exports = function(app){
        app.use(
            proxy('/api1',{
                target:'http://localhost:8000',
                changeOrigin:true,
                pathRewrite:{'^api1':''}
            })
        )
    }
    

三、项目结构

   public
       index.html
       favicon.ico
   src
       components // 组件
       app.jsx    // 单页面应用业务文件入口
       index.js   // 入口文件，引入React，ReactDom，App。调用rend er()
    

四、样式模块话

    // css命名a.module.css
    // 引入
    import a from a.module.css
    // 使用
    <div className={a.color}><div/>
   

五、diss算法

对数据进行添加，删除等逆序操作，DOM浪费更新，效率太低。

结构中包含输入控件，输入控件界面会显示错误。

    <ul>
        <li key=0>0<input type=text/><li/>
        <li key=1>1<input type=text/><li/>
        <li key=2>2<input type=text/><li/>
    <ul/>

六、消息订阅与发布

    import PubSub from 'pubsub-js'
    // 订阅
    PubSub.subScribe('sendData',(_,data)=>{
        // 第一个参数消息名，第二个参数数据
    })
    // 发布
    PubSub.public('sendData',{a:1})
   

redux

一、store

    //此写法为简单模式，上面截图加入thunk和applyMiddleware，在antion中传入方法后可以把dispatch以参数
    //形式带出
    import {createStore} from 'redux'
    import reducer from './reducer'
    
    export default createStore(reducer)
    

二、rudecer

    reducer(preState == 0,action){
        const { type , data } = action
        switch(type){
            case 'increment'
                return preState + data
            case 'decrement'
                return preState - data
            default 
                return preState
        }
    }

三、action

    // 返回Object同步action
    export createIncrementAction = data => ({type:'increment',data})
    // 返回function异步action
    export createIncrementAction = data => {
        return (dispatch)=>{
            dispatch(createIncrementAction(data))
        }
    }

四、组件使用api

    import store from '.../store'
    import {createIncrementAction} from '../action'
    
    
    <div>{store.getState()}</div>
    
    
    // store.dispatch({type:'increment',data:1})
    store.dispatch(createIncrementAction(1))
    
    // 局部
    componentDidMount(){
        store.subscribe(()=>{
            this.setState({})
        })
    }
    // 全局index.js
    store.subscribe(()=>{
        ReactDom.renser(<App/>,document.getElementById('root'))
    })