Redux 学习笔记-白红宇

Redux 学习笔记

阅读量：5833 次

发布时间：2019-06-18

本文共 1860 字，大约阅读时间需要 6 分钟。

1：首先安装redux：

npm install --save redux

2：引入redux ：

import { createStore } from 'redux';

//首先创建执行函数，Reducer 是一个函数，//它接受 Action 和当前 State 作为参数，返回一个新的 State。function counter(state, action) {  switch (action.type) {  case 'INCREMENT':    return state + 1;  case 'DECREMENT':    return state - 1;  default:    return state;  }};

//Redux 提供createStore这个函数，用来生成 Storelet store = createStore(counter,10);//createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

//Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数store.subscribe(() =>  alert(store.getState())//当前时刻的 State，可以通过store.getState()拿到。);

store.dispatch({ type: 'INCREMENT' });//store.dispatch接受一个 Action 对象作为参数，将它发送出去(dispatch分派的意思)

3：以下两种方式是等价的：

一级父组件：

二级父组件：

const TodoList = React.createClass (  {    render() {      return (        
     
                {
    this.props.todos.map((todo, index) =>            
      
             )    }  })

三级子组件：

const Todo = React.createClass({ render() {    return (      
     
          );  }})

其中二级父组件还可以这样写：

const TodoList = React.createClass (  {    render() {      return (        
     
                {
    this.props.todos.map((todo, index) =>            
      
        this.props.onTodoClick(index)} />          )}        
      
           )    }  })

4：关于export default 和 module.exports 区别　

　　　　　　　　　　　　　　　　　　　　　　　　module.exports是CommonJS的模块规范

　　　　　　　　　　　　　　　　　　　　　　　　export default是ES2015的模块规范

加载方式	规范	命令	特点
运行时加载	CommonJS/AMD	require	社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载	ESMAScript6+	import	语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。