慕課網react開發簡書網站項目中涉及的基礎知識點

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。