react 腳手架環境安裝以及實現過程

2021-10-07 15:31:43 字數 1806 閱讀 7246

(失敗的情況下1.管理員身份開啟powershell 2.輸入set-executionpolicy remotesigned 選a)
檢測

建立專案 執行

yarn start
15-1

方法一 1父元件將向子元件傳值 屬性傳遞props接收 props是唯讀不能改的

2 子元件向父元件傳值 子元件呼叫父元件方法,通過引數進行傳值的

state來自于父元件的props derivedstate 原生狀態

方法二觀察者模式

方法三公共的

安裝yarn add pubsub-js 這個是兄弟元件傳值工具

pubsub-js

pubsub.publish(「事件名」,"資料」)—(emi

t)觸發

事件pu

bsub

.sub

scri

be(′

事件名′

,(ev

tnam

e,da

ta)=

>)−

−−

(emit) 觸發事件 pubsub.subscribe('事件名',(evtname,data)=>{}) ---(

emit)觸

發事件p

ubsu

b.su

bscr

ibe(

′事件名

′,(e

vtna

me,d

ata)

=>)−

−−(on)監聽事件

15-2受控元件與非受控元件

受控元件是受到控制的元件

****constructor(props,context) 建構函式****

state getderivedstatefromprops(props,state)

**render() 渲染

componentdidmount()模組渲染後**

(static靜態方法,直接用類名呼叫,因為沒有經過例項化,所以不能用this)

16-2更新階段的鉤子函式 -順序

static getderivestatefromprops(props.context)

shouldcomponentupdate(nextprops,nextstate) 做效能優化,返回布林值 true render false不渲染

(purecomponent 純元件 淺比對 可以優化渲染的次數)

無狀態元件是用react.memo(無狀態元件)

render()渲染

getsnapshotbeforeupdate(prevprops,prevstate) 返回snapshot 資料更新前的dom狀態,必須和componentdidupdate連用

componentdidupdate(prevprops,prevstate,snapshot) 監控元件裡的資料變化

16-3解除安裝

componentwillunmount

(reactdom.unmountcomponentatnode)

16-4

createcontext() provider 提供資料 consumer消費陣列
16-5 children

《元件》中間的內容 16-6高階元件 hoc(元件名) :

本質是高階函式 :

引數是元件 ,返回值也是元件 ,這樣的元件就是高階元件

vue腳手架環境搭建

安裝node.js 安 裝vue cli 使用指令npm install g vue cli 全域性安裝腳手架 初始化專案 先cd到自己想要建立新專案的資料夾下,然後使用vue init指令 vue init 模板型別 專案名稱 vue的模板型別,有很多種,可以使用vue list 指令檢視 使用w...

vue cli3 11安裝腳手架 環境搭建

安裝nodejs,自帶npm npm uninstall vue cli g or yarn global remove vue cli npm install g vue cli npm install g vue cli ps vue cli2的安裝方法 npm install g vue cl...

vue環境配置腳手架環境搭建vue工程目錄

安裝完成之後,windows r 執行命令 cmd 輸入node v 檢查是否已經安裝成功.如果會顯示版本資訊,說明安裝成功 現在就可以使用node中的npm包管理器來構建vue專案 npm install g cnpm registry 之後就可以用cnpm 代替npm了 執行命令cnpm ins...