亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

React JS? ?網頁應用

React Native? 原生應用

React VR? VR或全景視圖

React Filber是指React16之后的版本對應的React框架，對底層的核心算法進行改良，引入了一些優先級的的概念、分片的概念，使React的代碼更加流暢，尤其是處理一些復雜的動畫的時候

React執行的入口文件是src/index.js

registerServiceWorker是一個pwa（離線頁面的內容）

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

//開發環境

node

npm

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

查看鏡像源使用狀態：npm get registry

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

//創建新的 React 應用

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

*nodejs全局安裝包在其他盤Program Files下時文件夾 解析會出現空格導致包不能安裝，需要更改全局安裝包的安裝路徑

<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基礎：this指向

es6語法：class-constructor 擴展運算符

組件：網頁的一部分

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

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

import ReactDOM from 'react-dom';

ReactDom庫 將組件掛載到頁面的一個節點上

比如，將App組件渲染到public/index.html文件（項目的html文件）的root節點里

public/index.html：項目的html文件

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

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

2、reactjs官網：https://reactjs.org/

點擊docs

點擊右側 create a new react app - create react app 創建react項目的腳手架

創建項目的命令行：

npx create-react-app 項目名

cd 項目名

npm run start? - 自動啟動初始化項目

課程內容：react + redux

名詞解釋

react：facebook開源框架

react js 網頁應用

react native 原生應用

react vr 全景式圖像應用

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

什么是?jsx?語法？

? ? ? 在定義的組件中：

? ? ? ?1.可以直接返回視圖標簽不報錯。

? ? ? ?2.外層必須要有一個根標簽包裹著

? ? ? ?3.根標簽內部可以寫?js?表達式，會自動編譯，js?語句會報錯

? ? ? ?4. index.js?中 render?中引用組件時，組件名寫在標簽符號內。

jsx標簽語法中還可以通過{}來寫一下js表達式，不能寫語句

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

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

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

注意：這里有個觀點：（點、面）

頁面中的每個元素都可以是個組件（也可以理解成點）；

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

a：目標組件
b：目標DOM節點

4.定義組件的方式：

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

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

????????return {

????????????????//????組件內容
????????????}

????}

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

第二種：函數聲明

function App() {

? return (

??????//? 組件內容

? );

}

export default App;

?

this指向問題

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

1：jsx語法允許標簽結構
2：{1+3}js的表達式不能寫語句

1:reactDom 引入可以渲染內容 必須包含（render）
2：組件顯示內容由render 導入， app導出

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

子組件通過props接受props接受父組件傳遞過來的參數

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