WEB前端零基础课

今天的WEB零基础课的内容是Redux，它的思路比较“拧”，不怎么好理解，算是react里的一个难点。讲完之后，同学们纷纷表示没听懂，

这个东西只靠听，肯定是搞不懂的，还是要多写，通过多写去理解它的运行思路。

在我看来，redux的目的之一，就是把数据的传递从组件的层级上，剥离开。不使用redux时，组件的层级，其实是react数据的传递的通道。

要多写，否则没用。

1228的redux学习笔记摘录

redux [ri:'dʌks]，是reactJs的状态管理。

它就是用来专门的管理react的数据传递的。

reactJs它就是dom的一个抽象层，它不是一个完整的webApp应用的解决方案。

它有二个方面没有处理：

1，代码结构的管理；

2，组件之间的通信；

redux，它出现的原因，我个人主观认为是第二个。

如果你的UI层、页面交互很简单，没有很多层的页面，那用不着redux，

否则会增加不必要的复杂性；

如果没有，多用户之间的协作、跟服务器大量的交互，那用不着

redux的适用场景：多交互，多数据源

Redux的设计思想比较简单：

1，web应用的就是一个状态机，视图与状态是一一对应；

2，所有的状态，保存在一个大对象里。它也是一个单独的东西，一般是单独的js文件。

所有的状态，保存在一个大对象里。

它叫做：Store，

import from 'redux';

const store = createStore(fn);

// fn，就是 reducers，

Store对象，它里面保存着当前应用的所有状态。

它里面的状态，State，

调用getState()方法获取，

import from 'redux'; //引入redux

const store = createStore(fn); //创建一个Store

let state = store.getState(); //获取它里面的状态

Action，它是view(视图)发出的通知，表现State要发生变化。

Action，

它里面是一个对象，里面是属性和值，type属性是必须的，是名称，

let action = {

type : '名称，其实就是引用',

具体事情的名称： '要做什么事'

}

dispatch，是store的方法。store.dispatch()，

import from 'redux'; //引入redux

const store = createStore(fn); //创建一个Store

store.dispatch({

type : '名称，其实就是引用',

具体事情的名称： '要做什么事'

});

它接收一个action做为参数，发出Action

Reducers [rɪ'dju:sə]

Reducers，它是一个“处理action要做的事情的地方”，

Reducers 收到state之后，要返回一个新的 state，

这个过程，叫做 Reducers [rɪ'dju:sə]

Reducers，是一个方法，接收二个参数：

1，action；2、当前的state

返回的是一个新的 state，

// 伪代码：

let defalutstate = 0;

let reducer = ( state = defalutstate, action ) => {

switch ( action.type ){

case 'add':

return state + action.addNum

case 'mins':

return 减法的内容

defalut:

return state

}

}

let state = reducer( 1,{

type : 'add',

addNum : 2

});

// 此伪代码的返回值，应该是3

返回的新的state，它的值是3

从这个伪代码可以看出，它的计算，脱离了父子组件的传递。

redux的目的之一，就是把数据的传递从组件的层级上，剥离开。

之前我们的写法，组件的层级，其实是react数据的传递的通道。

它用来监听函数，一但state发生变化，就自动执行。

这是什么？观察者模式。

import from 'redux'; //引入redux

const store = createStore(fn); //创建一个Store

...

..

.

store.subscribe( ReactDOM.render(...) );

重新渲染页面。

Redux的工作流程：

1、发出action

2、store自动调用 reducers，并传入二个参数，

-当前state

-收到的action,

它会返回新的state

3、state一但发生变化，就自动 调用 store.subscribe(listen);

4、listen要通过 getState()得到更新之后的state，

调用render，重新渲染页面。

reactJs，它的思路跟 jquery 完全不同。

redux，它的思路，跟reactJs，不说完全不同，相差也很大。

redux，不是reactJs自带的。需要通过npm安装，

npm install redux -save

今天的作业：

1，把留言板的结构、实现的思路，在纸上画出来，

2，redux的例子的实现的思路，同上，

这二个照片发我邮箱，今晚24：00之前。