react开发简书学习笔记

1、引入styled-components
样式文件实际上是一个个组件，这样就不会互相影响
2、用iconfont嵌入图标
3、安装动画实现搜索框

cnpm install react-transition-group --save

通过失焦和获焦来改变样式

4安装redux和react-redux

5 、reducer拆分

combineReducers

6、immutable.js可以生成不可改变的对象immutable

• fromjs方法可以把数据对象转化成对象
• immutable对象的set的方法，会结合之前的对象值，返回一个全新的对象
• immutable对象的merge的方法，返回多个immutable对象，merge的语法

因为手动没法保证reducer中的state不被修改
自己的get方法来获取，set方法来设置

redux-immutable统一数据格式

7、在搜索框中异步加载ajax数据用的是redux-thunk插件，目的是可以在action中写入函数，使得ajax可以放在action中，action和store中间件，dispatch方法的一个升级

8、使用，在store中的index.js中引入，applyMiddleware(redux提供的方法)

9、可以在public中创建文件写入虚拟的数据

{
	"success":true,
	"data":[]
}

创建一个anction，dispatch给reducer
初始化时immutable对象，此时的代码数组是普通的对象，要转化为immutable对象

10、优化

• 用解构赋值做代码得优化
• 用swich case代替if else

11、可以把immutable的数组转化为普通的数组
toJS()

12、写旋转动画时，用ref获取dom元素，对dom元素进行操作
13、性能优化，解决点击输入框多次获取ajax数据
当list.size===0时请求数据

路由：
就是url的不同
import {BrowserRouter,Route} from ‘react-router-dom’;//表示引入

前端组件化，把页面拆分成一个个的组件，组件自己来维护交互和显示

reducer中管理数据

Provider使得它里面的子组件可以使用store
Provider的唯一功能就是传入store对象。
react-redux中的connect方法，连接store,拿到store里面的数据（包装出一个容器组件）
有俩个方法mapState（从store里面拿数据），通过state.get()或者state.getIn()
和map
import {connect} from ‘react-redux’;
export default connect()(Topic);

循环immtable数组用的是item.get

首页调用ajax数据

state.merge一次合并多个属性多个set
调用ajax，要改变store里面的数据，
第一步：创建action
第二步：把action派发给store，用connect的dispatch方法
第三步：创建mapDispatch，等于一个对象
第四步：在reducer中接收action
第五步：修改为immediate对象
第六步：用state.merge修改为新的值（多个set的合并）

异步操作代码的优化

1、ui组件与容器组件的分离，
2、容器组件可以由redux-thunk中间间放在action中管理，action在actionCreators中创建,redux-thunk使得我们可以返回一个函数，所有异步操作在actionCteators中进行

点击加载更多
1、点击时让action做异步请求数据的操作
2、在mapDispatch中加入点击事件，diapatch给store
（UI组件由参数（this.props）提供）
3、在actionCreators中创建action，在组件中引入
4、通过一个对象来帮助派发一个action
5、在reducer.js中通过.set方法改变state数据

分页
1、在reducer中加入一个默认页
2、在组件中获取这个页的参数传递
3、在actionCreators中接收这个参数加入地址后面
4、接收下一页的参数
5、在reducer中改变页的内容

回到顶部

1、在reducer中设置默认属性showScroll为false，
2、在组件中使用属性（mapState）
showScroll:state.getIn([‘home’,‘showScroll’])
3、设置监听scroll事件
4、在mapDispatch中dispatch给store,其中dispatch接收actionCreators的一个对象
5、在reducer中改变action的属性

Detail
1、写页面
2、在store中管理数据
3、改为非转义html

 <Content
                dangerouslySetInnerHTML={{__html: content}}
 />

一定要是单标签

ajax请求数据

页面路由传参（点击进入详情页）
动态路由传参
1、路由的出口设置

<Route path='/detail/:id' component={Detail}  exact></Route>

2、路由的入口设置

<Link key={index} to={'/detail/'+item.get('id')}>

3、在对应的子路由中获取参数

this.props.match.params.id

4、在ajax请求中axios加入参数
‘/api/detail.json?id=’+id

登陆页面功能
1、点击登陆的时候，获取账号和密码的ref，用的是innerRef(在styled-component)中
2、派发给actionCreators
3、在actionCreators中用ajax请求
4、向模拟接口传递账号和密码
5、如果成功返回一个true的dispatch给reducer
6、登陆成功后，Redirect重定向到首页
退出
1、点击事件
2、派发一个action给actionCreators,然后在reducer中修改值

写文章的授权:
登陆状态true，跳转到写文章，false,跳转到登陆

异步组件和withRouter路由方法的使用
异步组件：每次只加载对应浏览的页面(优化)

cnpm install react-loadable --save

import Loadable from 'react-loadable';
import React from 'react'

const LoadableComponent = Loadable({
  loader: () => import('./'),
  loading(){
      return <div>正在加载......</div>
  }
});

export default ()=><LoadableComponent/>

import {withRouter} from 'react-router-dom'
(withRouter(Detail))

项目上线流程
打包cnpm run build
然后放到服务器的文件里面

涉及到的技术：
redux数据层框架,react中如何方便使用redux
react-router immtableJS,style-comment,第三方模块