react项目地址：https://github.com/suhuashan/jianshu，该项目是学习慕课网react视频教程而手动敲，目前项目是用class写react，后续我会引用react hooks会重构项目。
如果对您有帮助的话，麻烦在github给个star~
1.Fragment 占位组件
2.dangerouslySetInnnerHTML = {{__html: 变量}}
3.this.setState({ })
现在更建议使用this.setState(() => ({ }))
以前是返回一个对象，现在推荐使用函数返回对象，这样函数内可以有一定的逻辑，然后再通过return 返回对象。
在this.setState中更改数据，建议使用prevState，保存数据的上一个值
4.react单向数据流
父组件可以向子组件传值，子组件只能使用，而不能去改变，否则将会报错。
例如，todolist里面对数据进行删除，父组件传递给子组件删除属性，子组件通过删除属性来调用父组件的方法。这样就是父组件的方法删除父组件的数据。
5.特点
声明式开发
可以与其他框架并存
组件化
单向数据流
视图层框架
函数式编程
6.react开发调试工具 Reactdevelopertools安装
图标显示红色表示网站由react开发
图标显示深蓝色表示网站由react线上版本代码开发
图标显示灰色表示网站不是由react开发
7.PropTypes的使用
该属性的作用就是会对父组件传递给子组件的值进行类型强校验，如果不是期望的值，便会报错。
import PropTypes from “prop-types”;
class Child extends React.Component { }
Child.propTypes = {
content: PropsTypes.string,
//或者PropsTypes.string.isRequired如果父组件没有传content值,浏览器便会报错
deleteItem: PorpsTypes.func
}
Child.defaultProps = {
content: “hello world”
}
说明：content,deleteItem都是属于父组件的属性
8.state,props,render的关系
当组件的state或者props发生改变的时候，render函数就会重新执行；
当父组件的render执行的时候，子组件的render也会执行。因为父组件包裹着子组件。
9.虚拟DOM
方案一：
1.state数据
2.JSX 模板
3.数据 + 模板结合，生成真实的DOM，来显示
4.state发生改变
5.数据 + 模板结合，生成真实的DOM，替换原始的DOM
缺陷：
1.第一次生成了一个完整的DOM片段
2.第二次生成了第二个完整的DOM片段
3.第二次DOM替换第一次的DOM，非常耗性能
方案二：
1.state数据
2.JSX 模板
3.数据 + 模板结合，生成真实的DOM，来显示
4.state发生改变
5.数据 + 模板结合，生成真实的DOM，并不直接替换原始的DOM
6.新的DOM（DocumentFragment）和原始的DOM做比对，找差异
7.找到input框发生了变化
8.只用新的DOM的input框，替换旧的DOM的Input框
缺陷：性能并没有得到提升
方案三（React虚拟DOM解决方案）:
1.state数据
2.JSX 模板
3.数据 + 模板结合，生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实的DOM）（损耗了性能）
JSX模板 --> createElement --> （虚拟DOM）JS对象 --> 真实DOM
['div',{id: 'abc'},['span',{ },'Hello World!']]
4.通过虚拟DOM，生成真实的DOM，来显示
<div id="abc"><span>Hello World！</span></div>
5.state发生改变
6.生成新的虚拟DOM（极大地提升了性能）
['div',{id: 'abc'},['span',{ },'bye bye']]
7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别就是span标签中的内容（极大地提升了性能）
8.直接操作DOM，改变span中的内容
10.生命周期函数
生命周期函数是指在某一个时刻组件会自动调用执行的函数。
Initialization:
setup props and states
Mounting:
componentWillMount：组件挂载在页面之前会被执行，只会被执行一次
render：组件渲染到页面上
componentDidMount：组件挂载在页面之后会被执行，只会被执行一次
执行顺序是：componentWillMount -> render -> componentDidMount
Updation:
shouldComponentUpdate：组件更新之前，会被执行，函数内需要返回布尔值。返回true，组件被更新，会继续执行生命周期函数。返回false，则不需要。
componentWillUpdate：根据shouldComponentUpdate返回的布尔值，是否执行。
componentDidUpdate：如果组件更新完成之后，会被执行。
componentWillReceiveProps：一个组件要从父组件接收参数；如果这个组件第一次存在于父组件中，不会执行；如果这个组件已经存在于父组件中，才会执行。
props发生改变的执行顺序：componentWillReceiveProps -> componentWillUpdate -> render -> componentDidUpdate
states发生改变的执行顺序： componentWillUpdate -> render -> componentDidUpdate
Unmounting
componentWillUnmount：组件将要被剔除之前，会被执行
11.生命周期函数的使用场景
shouldComponentUpdate(nextProps,nextState){
if(nextProps.content == !this.props.content) {
return true;
}else{
return false;
}
}
ajax请求需要放在componentDidMount，通过第三方模块axios进行请求
axios请求可以借助charles进行本地mock数据模拟。
12.CSS过渡动画
过渡效果：
.show{
transition: all 1s ease-in;
opacity: 1;
}
.hide{
transition: all 1s ease-in;
opacity: 0;
}
动画效果：
定义动画：
@keyframes hide-item{
0%{
opacity: 1;
color: red;
}
50%{
opacity: 0.5;
color: green;
}
100%{
opacity: 0;
color: blue;
}
}
使用动画：
.hide{
animation: hide-item 2s ease-in; //动画运行结束后，元素不会被隐藏
animation: hide-item 2s ease-in forwards; //动画运行结束后，元素会保留最后一个状态
13.react-transition-group的使用
官方文档：https://reactcommunity.org/react-transition-group/css-transition
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={this.show}
timeout={300}
classNames="fade"
unmountOnExit
appear={true}
onExited={(el) => {el.style.color = "blue"}
>
<div>hello</div>
</CSSTransition>
说明：根据this.show的布尔值来显示动画的入场和出场顺序。unmountOnExit是隐藏不占用文档流
css文件
入场动画的三个状态：
.fade-enter,.fade-appear{
opacity: 0;
}
.fade-enter-active,.fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in;
}
. fade-enter-done{
opacity: 1;
}
出场动画的是三个状态
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-exit-done{
opacity: 0;
}
说明：.fade-appear和.fade-appear-active的作用是首次加载显示动画
import { CSSTransition,TransitionGroup } from 'react-transition-group';
<TransitionGroup>
{
this.state.list.map((item) => {
return(
<CSSTransition
timeout={300}
classNames="fade"
unmountOnExit
onExited={(el) => {el.style.color = "blue"}
key={index}
>
<div>{item}</div>
</CSSTransition>
)
}
}
</TransitionGroup>
14.redux的开发调试插件
redux devtools
15.react对组件的拆分
UI组件负责渲染，容器组件负责逻辑
无状态组件：用函数来定义，这样渲染组件可以减少执行生命周期函数，提升了性能。
一般UI组件就可以使用无状态组件。
16.使用redux-thunk进行ajax异步请求数据
redux中间件
中间件其实就是action和dispatch之间，dispatch本来只能接收对象，但是引用中间件，便能接收函数，一旦接收到函数，就会将函数进行执行。可以理解为对dispatch函数重新封装。
17.使用redux-saga进行异步请求数据
和redux-thunk中间件的工作原理区别：
redux-thunk：将react组件的生命周期函数componentDidMount的axios请求数据逻辑抽离到actionCreators文件，重新写一个函数，封装异步请求逻辑。原理就是对dispatch方法进行封装（dispatch本来只能接收对象，但是在这个中间件的dispatch可以接收一个函数）。
redux-saga：react组件发出的action不止reducer可以接收，store配置的saga中间件也能捕获。工作流程：组件发出action —> saga中间件将其捕获，然后请求数据，并且重新发出一个新action —> 新action被reducer捕获，更新state。