m6d3周总结

本周主要任务完成情况

本周是我工作的第一个星期，由于对项目架构不了解所以本周没有进行实际的任务，主要是学习React+Redux+ES6的基础知识。以前都是用的jquery,在这个坑里难以跳出来。学习了React后对前端开发有了新的认识，就像学习了一门新语言，虽然还不能熟练地用React的思想去思考，但是能感觉到React组件开发的便利，相信我也会喜欢上高大上的React。 0.0

下周的计划

• 主要是高质量地完成工作的第一份任务。

• 在rc上敏感影集列表增加一个点击该用户昵称ID,跳转到用户的个人中心（1d）；

• 评论流水中增加一个点击该用户昵称ID,跳转到用户的个人中心(1d)。

• 继续学习和巩固React+Redux+ES6,并用其知识帮助理解op项目代码细节。

• 看rc项目代码，不理解的向大牛提问。

学习和成长

主要将React+Redux官方英文文档看了一遍，学习了很多新单词，对React组件开发有了大致认识，一下子看的有点多,了解的不深入，有一些细节下周研究。

1. React

• JSX： js的语法扩展，在js中写html可以生成dom元素，十分方便易于读写，还可以使用表达式。它是用babel转码器在编译阶段转换成正常js的。

• 组件：React是单向数据流，父组件通过props向子组件传递数据，子组件只读取不修改。子组件可以通过回调函数该变父组件state向父组件传递数据。
  两个子组件间传递数据要通过父组件。过程如下：
  I. 找一个共同的父组件,state放在父组件。
  II. 其中一个子组件通过父组件传递的回调函数改变state。
  III. state改变会同过props自动更新另一个子组件的UI。

2. Redux

按文档将Todo List demo敲了一遍。主要学习了三个内容：
(1) Action：Redux中state是不能修改的，只能添加，是为了能够实现回退功能，结果只能用action添加新的state,action是唯一数据来源。action的结构一般是

{    type:意图类型，表示要干什么（对state进行什么样的修改）    data:数据，表示要怎么干（把state修改为什么）}

通常建立action创建函数，保存在actions目录中，action创建函数结构：

function actionName(data){    return{        type:actionName,//大写加下划线        data    }}

(2) Reducer:连接action和state的桥梁，就像MVC中C是M和V的桥梁。reducer函数结构一般是：

function reducerName(prevState=initialState,action){    switch(action.type){        case type1:        .        .        .        default:        return prevState;    }}

(3) Store:存储state的数据结构，应该用的栈结构。用法：

let store =createStore(App);store.getState()//获取当前state,就是栈顶的statestore.dispatch(action)//执行一个action更新statelet listener=store.subscriber(listener)//注册监听器,当state变化时执行listener回调listener()//注销监听器

3. react-redux

<Provider store={store}>    <App />  </Provider>

将整个组件的state储存在store中。Provider让我想起了Android中的四大组件之一Provider,是提供数据的东西，在这里store也是提供数据的。
还有个connect是连接多个reducer的，这个示例代码看得不太懂，下周好好研究一下。

4. react-router

把官方示例做了一遍，学习了如下内容。
(1)

<Router history={hashHistory}>  <Route path="/" component={App}>    <IndexRoute component={Home}/>    <Route path="/repos" component={Repos}/>    <Route path="/about" component={About}/>    ＜Redirect from="/about" to="/repos" />    ＜IndexRedirect to="/welcome" />  </Route></Router>

(I) 嵌套路由。从左到右检查pathname,匹配时进入子Route继续匹配。
(II) IndexRoute是完全匹配.
(III)Redirect。当匹配‘/about’时跳转到‘/repos’。
(IV)当路由匹配到一个路由时不再往下匹配，所以上面Redirect不会生效。
(V) IndeRedirect.访问根路由时跳转到‘/Welcome’。
(2). Link&&IndexLink

<Link to="/about">About</Link>

对a链接进行包装，生成一个指向to的链接。有activeClassName属性，可以设置链接激活时的样式。

5. rc项目

(1).了解了一下结构
(2).针对一个Message页看了一下组件结构
整个页面加载之前：

Layout  GloableInitOnce     GloableLoadingMask     GloableConfirmDialog

MsgPage加载完成:

HeaderAlertBarMsgTabBar    UserTabBar    AllTabBarUnreplayUserCheckBoxMsgListContainer    MsgBox    .    .    .    Pagination