总结/简书react项目

1.react

注重函数式编程

2.开发环境

脚手架 grunt,gulp,webpack是现在当前已经存在的一些脚手架

而官方提供的脚手架 create-react-app

3.运行

yarn start

4.项目目录

项目入口:src 下的index.js

yarn.lock 项目依赖安装包版本号

package.json node的包文件

5.组件

一个类继承React.component这个类他就是一个组件了，通过 render函数来返回一个内容，返回是什么就展示什么。

其中展示的时候需要用到JSX语法，因此最开头需要引入react,react使得jsx语法让其可以被编译识别。

6.render函数最外层

render函数return的最外层必须是单个元素，由div包裹，或者通过fragment占位符。

7.constructor

最先被渲染的，将一些数据定义在状态里.this.state=

改变数据通过this.setState({})，setState这个函数里面可以记载preState,以及setState是异步的，可以在这个函数后加，再写上setState完了以后的事件。

8.事件的this指向不明需要bind.this

9.展示数据列表，需要循环展示，可以通过.map的方法

10.在展示的时候，数据列表需要绑定一个key值，尽量不要用index做key，涉及diff算法相关问题。key放在循环的最外层元素上。

11.jsx相关：

注释，{/*dd*/},

dangerouslySetInnerHTML={{_html: item}}

className,htmlFor

12.render函数：

何时渲染，当state,props,有变化。当父组件渲染时子组件也再次渲染

渲染的实质：jsx->createElement->虚拟dom->真实dom

13.diff算法

同级比较，key值比较

14.ref的绑定

{(input) => {this.input = input}}

15.生命周期函数

初始化，挂载，更新，销毁

16.性能提升

constructor的绑定只绑定一次

shouldComponentUpdate 将state比较，true,false

ajax请求，只进行一次在componentdidmount

数据更新浅拷贝 [...res.data]

17.redux

数据管理

store唯一，store才能改变状态，reducer纯函数，createStore,dispatch,getState,subscribe

action,actionTypes,actionCreators.

reducer,defaultState,函数返回一个state,action通过action.type来判断，深拷贝

18.中间件

redux-thunk,异步请求，统一管理，使得dispatch需要一个对象时，里面可以是一个函数，dispatch会帮忙运行该函数。

saga,大型项目使用

react-redux connect函数，不用再subsrcibe

18.ui组件，容器组件

19.react-router 路由，<link>

20.immutable 不可变对象

在defaultState中有使用，以及再改变数据时，同样也需要一个immutable对象

通过fromJS({})

21.styled-components

css为js,styled引入，使用为export const topicWrapper= styled.div`

css相关

22.react-loadable

异步加载组件的好帮手,改变的地方有 route的component路径为一个loadable.js 在对应组件里需要有withRouter()这样才能再读到相应的路径上的参数数据。withRouter()