第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

React JS? ?網(wǎng)頁應(yīng)用

React Native? 原生應(yīng)用

React VR? VR或全景視圖

React Filber是指React16之后的版本對應(yīng)的React框架，對底層的核心算法進(jìn)行改良，引入了一些優(yōu)先級的的概念、分片的概念，使React的代碼更加流暢，尤其是處理一些復(fù)雜的動畫的時(shí)候

React執(zhí)行的入口文件是src/index.js

registerServiceWorker是一個(gè)pwa（離線頁面的內(nèi)容）

App.test.js用于自動化測試

//開發(fā)環(huán)境

node

npm

全局切換鏡像源：npm config set registry http://registry.npm.taobao.org

查看鏡像源使用狀態(tài)：npm get registry

全局切換官方鏡像源：npm config set registry http://www.npmjs.org

//創(chuàng)建新的 React 應(yīng)用

npx?create-react-app?appname??//新建項(xiàng)目
cd?appname
npm?start????//在項(xiàng)目文件夾下啟動

*nodejs全局安裝包在其他盤Program Files下時(shí)文件夾 解析會出現(xiàn)空格導(dǎo)致包不能安裝，需要更改全局安裝包的安裝路徑

<li key={index}? onClick = {this.handledel.bind(this,index)}

constructor(props){

? super(props)

? this.state = {

? ? ?list:xxxx

? }

}

handledel(index){

? ? ? const list = [...this.state.list]

? ? ? list.splice(index,1)

? ? ? this.setState({

? ? ? ? ? list: list

? ? ? })

}

js基礎(chǔ)：this指向

es6語法：class-constructor 擴(kuò)展運(yùn)算符

組件：網(wǎng)頁的一部分

App.js 定義react組件（定義組件的語法看一下）

index.js?項(xiàng)目入口文件?引入組件，通過ReactDOM庫把組件渲染到index.html上

import ReactDOM from 'react-dom';

ReactDom庫 將組件掛載到頁面的一個(gè)節(jié)點(diǎn)上

比如，將App組件渲染到public/index.html文件（項(xiàng)目的html文件）的root節(jié)點(diǎn)里

public/index.html：項(xiàng)目的html文件

1、下載nodejs：https://nodejs.org/en/

lts - long time support 同時(shí)npm包管理工具也下載下來

2、reactjs官網(wǎng)：https://reactjs.org/

點(diǎn)擊docs

點(diǎn)擊右側(cè) create a new react app - create react app 創(chuàng)建react項(xiàng)目的腳手架

創(chuàng)建項(xiàng)目的命令行：

npx create-react-app 項(xiàng)目名

cd 項(xiàng)目名

npm run start? - 自動啟動初始化項(xiàng)目

課程內(nèi)容：react + redux

名詞解釋

react：facebook開源框架

react js 網(wǎng)頁應(yīng)用

react native 原生應(yīng)用

react vr 全景式圖像應(yīng)用

react fiber：react16.0之后的react版本（16.1 16.2 16.3.......），因?yàn)檫@些版本改良了底層的核心算法，引入優(yōu)先級、分片概念，使react代碼運(yùn)行更加流暢，尤其是處理復(fù)雜動畫。

什么是?jsx?語法？

? ? ? 在定義的組件中：

? ? ? ?1.可以直接返回視圖標(biāo)簽不報(bào)錯(cuò)。

? ? ? ?2.外層必須要有一個(gè)根標(biāo)簽包裹著

? ? ? ?3.根標(biāo)簽內(nèi)部可以寫?js?表達(dá)式，會自動編譯，js?語句會報(bào)錯(cuò)

? ? ? ?4. index.js?中 render?中引用組件時(shí)，組件名寫在標(biāo)簽符號內(nèi)。

jsx標(biāo)簽語法中還可以通過{}來寫一下js表達(dá)式，不能寫語句

從項(xiàng)目入口、公共組件的作用、引入組件之后組件做了什么、怎么定義一個(gè)React組件，這四部了解整個(gè)項(xiàng)目的過程
1.項(xiàng)目入口在public/index.html

2.src/index.js中引入的組件庫的作用（React、ReactDOM）
React：識別組件
ReactDOM：渲染組件

3.首先我們聲明一個(gè)App組件（首字母大寫）使得React庫識別到我們聲明的是一個(gè)組件；
使用? ReactDOM自帶的函數(shù)render使得組件能夠渲染到頁面中

注意：這里有個(gè)觀點(diǎn)：（點(diǎn)、面）

頁面中的每個(gè)元素都可以是個(gè)組件（也可以理解成點(diǎn)）；

整個(gè)頁面的形式是一個(gè)個(gè)點(diǎn)的累積而形成的面
render函數(shù)可以攜帶兩個(gè)參數(shù)(a,b)

a：目標(biāo)組件
b：目標(biāo)DOM節(jié)點(diǎn)

4.定義組件的方式：

第一種：class類繼承的方式
列子：
import React ,{ Component } from 'react'
// 聲明組件 繼承React.Component類 或者可以寫成class App extends?React.Component{}

class App extends?Component{
????render(){

????????return {

????????????????//????組件內(nèi)容
????????????}

????}

}
export default App; //導(dǎo)出組件，如果不導(dǎo)出 外部無法使用

第二種：函數(shù)聲明

function App() {

? return (

??????//? 組件內(nèi)容

? );

}

export default App;

?

this指向問題

1:展開運(yùn)算符[...]（es6的寫法）
2：setState()

1：jsx語法允許標(biāo)簽結(jié)構(gòu)
2：{1+3}js的表達(dá)式不能寫語句

1:reactDom 引入可以渲染內(nèi)容 必須包含（render）
2：組件顯示內(nèi)容由render 導(dǎo)入， app導(dǎo)出

父組件通過屬性的形式向子組件傳遞參數(shù)

子組件通過props接受props接受父組件傳遞過來的參數(shù)

子組件如果想和父組件通信，子組件要調(diào)用父組件傳遞過來的方法