react 入門學習筆記

react create

react 快速構建 node 要大於 6 版本 項目構建腳手架命令： npm install create-react-app -g

C:\Users\MR\AppData\Roaming\npm\create-react-app -> C:\Users\MR\AppData\Roaming\npm\node_modules\create-react-app\index.js

特定是不需要任何的配置，快速 完成react的環境配置

創建項目：create-react-app my-project

create-react-app 命令不失敗

可以使用 npx create-react-app my-project 進行安裝.

啓動

cd my-project npm start

yarn: yarn start 啓動

boostrap 引入

npm install boostrap --save

control + C 可以關閉程序的運行，裝上bootstrap後再運行 npm run start

context

Props 屬性是 由上到下 單向傳遞的 Context 提供了在組件中共享此類值的方法 設計目的是共享那些對於組件來說全局的數據 不要僅僅爲了避免在幾個層級下的組件傳遞props而使用context

vs code 編輯器插件

VS Code Reactjs snippets 代碼塊模塊快捷鍵

Npm Intellisense 導入補全

Path Intellisense 路徑補全

Prettier 代碼格式

redux 和 mobx ， mobx 更好，但是 項目使用 redux

官方解釋：redux 是 js 應用的可預測狀態的容器。 可以理解爲全局數據狀態管理工具（狀態管理機），用來做組件通信等。 https://www.jianshu.com/p/b872ec0f3f5c

試讀：https://www.imooc.com/read/72

學習深入

https://www.imooc.com/read/83

高級函數

1. 函數可以作爲 參數被傳遞
2. 函數可以作爲返回值輸出

高階組件

1. 高階組件就是接受一個組件作爲參數並返回一個新組件的函數
2. 高階組件是一個函數，並不是一個組件

編寫高階組件

1. 實現一個普通組件
2. 將普通組件使用函數包裹

function d(WrapperComponent){
	return class D extends Component {
		render() {
			return (
				<div>
					<WrapperComponent></WrapperComponent>
				</div>
			);
		}
	}
}
export default d;

使用高階組件

1. 示例 （簡單使用，其他方式比較繁瑣忽略）

import React, { Component } from "react";
// import A from "./A";
import d from "./D";
class C extends Component {
  render() {
    return <div>C組件</div>;
  }
}
// export default A(C);
export default d(C);

2. 註解使用： @ 裝飾器註解

高級組件應用

代理方式的高階組件: 儘量使用代理

返回的新組件類直接繼承自 React.Component

1. 操縱prop
2. 抽取狀態
3. 訪問ref
4. 包裝組件

繼承方式的高階組件

採用繼承關聯作爲參數的組件和返回的組件，假如傳入的組件參數是WrappedComponent , 那麼返回的組件就直接繼承自 WrappedComponent

1. 操縱prop（沒有代理組件功能強，很少用）
2. 操縱生命週期函數

高階組件顯示名

用於調試輸出顯示, 可以在瀏覽器安裝React 插件進行調試來方便使用

路由 router

安裝

npm install react-router-dom --save