React 学习笔记

Basic Knowledge 基础知识

源码目录结构

根文件
package.json

1.包含了 npm start 和 npm run build 的 node 命令(这点有点像 makefile)
2.包含了依赖库。其中依赖库分为 开发状态下的依赖库和发行版本的依赖库

对于开发依赖库 devDependencies
只在开发的情况下会使用到，最后build的成品，不会含有这些开发依赖库的代码
给项目装一个库并且指定其是开发依赖库

npm install xxx --save-dev

对于发行版本依赖库 dependencies
开发和发行都会使用到，并且build的成品包含这些库的代码
安装指令

npm install xxx --save

Webpack配置文件
webpack.config.js 与 webpack-production.config.js

这两个配置文件是在package.json里的 start 和 build 命令中被引用的

webpack.config.js 则是webpack-dev-server 在未指定config的情况下，默认引用的配置文件。

Webpack的配置文件规定了app的入口源码文件，比如上图的src/index.jsx
还规定了文件类型的加载器loader
以及一些插件（这些插件需要先 npm install xx 然后才可以再webpack配置文件里用）

路由

APP的入口源码文件 index.jsx 会引用一个路由文件 routeMap.jsx

import RouteMap from './router/routeMap.jsx'
import { hashHistory } from 'react-router'
render(
        <RouteMap history={hashHistory}/>,
    document.getElementById('root')
)

路由文件会指定不同路由（url）对应的页面，以及首页的页面

class RouteMap extends React.Component {
    updateHandle() {
        console.log('每次router变化之后都会触发')
    }
    render() {
        return (
             <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}>
                <Route path='/' component={App}>
                    <IndexRoute component={Home}/>
                    <Route path='list' component={Main}/>
                </Route>
            </Router>
        )
    }
}

其中上面代码中App这个组件，是一个路由模板组件，这个模板用来容纳不同路由对应的不同页面，相当于一个装组件的容器。
App.jsx

class App extends React.Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

Redux 数据交互

A 规则函数

export default function userinfo(state = initialState, action) {
switch (action.type) {
  // 登录
  case actionTypes.USERINFO_LOGIN:
      return action.data
  // 修改城市
  default:
      return state
}
}

B 规则函数对应的action函数（用于自动格式化数据）

export function login(data) {
return {
  type: actionTypes.USERINFO_LOGIN,
  data
}
}

A 与 B 是对应的，action函数返回的内容会作为规则函数的action参数

C 将规则函数打包在一起，创建一个store并且export导出

const rootReducer = combineReducers({
 userinfo
 navigation
 ...
})

export default function configureStore(initialState) {
 const store = createStore(rootReducer, initialState,
     // 触发 redux-devtools
     window.devToolsExtension ? window.devToolsExtension() : undefined
 )
 return store
}

D 根部渲染要使用 Provider 组件，并且传入创建好的store

render(
 <Provider store={store}>
     <Hello/>
 </Provider>,
 document.getElementById('root')
)

E 用到redux的组件

使用connect 来export

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(Hello组件名称)

包含两个函数

mapStateToProps

把redux的state导入，作为本组件的props

function mapStateToProps(state) {
return {
   userinfo: state.userinfo
}
}

mapDispatchToProps

把B中的action函数导入，并关联A, 作为本组件的props

import * as userinfoActions from '../actions/userinfo'

function mapDispatchToProps(dispatch) {
return {
   userinfoActions: bindActionCreators(userinfoActions, dispatch)
}
}