React ?學(xué)習(xí)第二天

我這個(gè)React 學(xué)習(xí)存在以下毛病

1.不報(bào)錯(cuò)，

2.不能自動(dòng)熱加載，不能自動(dòng)刷新

3.不能修改props 屬性的值，但是這個(gè)卻能夠修改。

?

?

1.Vue 和React的關(guān)于 key ?的區(qū)別

1.1 使用v-for 和map 的時(shí)候，盡量使用key 進(jìn)行綁定，否則會(huì)產(chǎn)生相關(guān)的紊亂。

1.2 react 中，在進(jìn)行forEach 循環(huán)/for 循環(huán)/ map 時(shí)，需要添加 key 給 相關(guān)控制的元素。

數(shù)組的forEach ?和數(shù)組的 map ?方法。

forEach 遍歷每一項(xiàng)，然后進(jìn)行相關(guān)的操作，

map 遍歷每一項(xiàng)，然后生成一個(gè)新的數(shù)組，會(huì)有返回值，需要接收。

//方案一，數(shù)組的forEach 方法

arrStr.forEach(item?=>{

const?temp?= <h5?key={item}>{item}</h5>

nameStr.push(temp);

})

?

//方案二，數(shù)組的map 方法,map 中必須寫return

const?result?= arrStr.map(item?=>?{

return?item+ '---'

});

console.log(result);

?

?

2.JSX 語法中的注釋。

{/* 這個(gè)是注釋一*/}

{

//這個(gè)是注釋?二 ?

}

還有就是 class===》》》className

for -->>> htmlFor ?

//假設(shè)main.js 是入口文件，

console.log('01--假設(shè)這個(gè)是初始化文件');

//1.導(dǎo)入包名。

import?React?from?'react'?//創(chuàng)建組件，創(chuàng)建虛擬DOM，生命周期的相關(guān)，

import?ReactDOM?from?'react-dom'?//渲染到頁面展示相關(guān)，

?

//2. 創(chuàng)建虛擬的DOM 元素，

//第一個(gè)參數(shù)，創(chuàng)建元素的標(biāo)簽類型，

//第二個(gè)參數(shù)是節(jié)點(diǎn)的屬性，

//第三個(gè)參數(shù)是標(biāo)簽的子元素，或者內(nèi)容

// const h1= React.createElement('h1',{id : 'h1',title :'h'},'這個(gè)想試圖創(chuàng)建一個(gè)H1');

// // const mydiv = React.createElement('div',null,'這個(gè)是div 元素',h1);

// const div1 = <div>這個(gè)是一個(gè)div

// <h1 >這個(gè)是h1</h1>

?

// </div>

//3.把虛擬DOM 渲染到頁面上。

//第一個(gè)參數(shù)，渲染誰，

//第二個(gè)參數(shù)，渲染的容器，

?

let?a?= 10?///等價(jià)于 const a = 10

let?str?= '您好，劉送杰同學(xué)';

const?h1?= <h1>這個(gè)是一h1</h1>

const?arr?= [

<h1>第一個(gè)</h1>,

<h1>第二個(gè)</h1>

];

let?arrStr?= ['柯南','毛利小五郎','毛利小可愛','小柯南'];

const?nameStr?= [];

//方案一，數(shù)組的forEach 方法

arrStr.forEach(item?=>{

const?temp?= <h5?key={item}>{item}</h5>

nameStr.push(temp);

})

?

//方案二，數(shù)組的map 方法,map 中必須寫return

const?result?= arrStr.map(item?=>?{

return?item+ '---'

});

//console.log(result);

?

ReactDOM.render(<div>

{a}--<hr/>{str}

<hr/>{h1}

{/* 這個(gè)是注釋*/}

{

//這個(gè)是注釋

}

<hr/>

{arr}

<hr/>

{nameStr}

<hr/>

{arrStr.map(item?=>?{

return?<h3?key={item}>{item}</h3>

})}

<hr/>

<p?className="myname">!11!!!!</p>

<label?for="000">1111</label>

</div>,document.getElementById('app'))

?

//上面這個(gè)方式比較復(fù)雜，不人性化

//const h11= <div>這個(gè)是一個(gè)div</div>，但是不能解析，需要相關(guān)的包，需要使用bable 進(jìn)行轉(zhuǎn)換。

?

?

?

3.React 中創(chuàng)建組件的方式

3.1 第一種

第一步，創(chuàng)建

function?Hello?(){

//如果在一個(gè)組件中return 一個(gè)null， 表示空組建，什么都不渲染，

//return null;

//這種以對(duì)象或者函數(shù)的方式創(chuàng)建的組件，必須返回一些內(nèi)容，實(shí)在不行，也要返回

//一個(gè)空內(nèi)容

//使用的時(shí)候，/*將組件的名稱，直接以標(biāo)簽的形式丟到頁面上即可*/

return?<h1>返回一個(gè)h1</h1>;

}

第二步，傳遞數(shù)據(jù)，

定義好數(shù)據(jù)，const dog =｛｝

?

先在<Hello name={dog.name}></Hello>，通過屬性進(jìn)行傳遞傳遞數(shù)據(jù)

然后在 組件內(nèi)部取，props.name ?props.age

//構(gòu)造函數(shù)中接收外在函數(shù)傳遞的數(shù)值。

function?Hello?(props){

//如果在一個(gè)組件中return 一個(gè)null， 表示空組建，什么都不渲染，

//return null;

//這種以對(duì)象或者函數(shù)的方式創(chuàng)建的組件，必須返回一些內(nèi)容，實(shí)在不行，也要返回

//一個(gè)空內(nèi)容

//使用的時(shí)候，/*將組件的名稱，直接以標(biāo)簽的形式丟到頁面上即可*/

console.log(props);

props.testage?=15; //試圖賦值--視頻老師說無法賦值，但是我成功了。

props.testcolor?= '白色'

return?<div>返回一個(gè)h11111--{props.testage}--{props.testcolor}</div>;

}

const?dog?={

age :?123,

name :?'大黃',

color :'黃色'

}

?

ReactDOM.render(<div>

{/*將組件的名稱，直接以標(biāo)簽的形式丟到頁面上即可*/}

<Hello?testage={dog.age}?testcolor={dog.color}></Hello>

</div>,document.getElementById('app'));

?

上；述方式的缺點(diǎn)：就是傳遞屬性的個(gè)數(shù)有限，如果傳遞多個(gè)，寫起來不好看

使用ES6的展開運(yùn)算符簡(jiǎn)化傳遞props數(shù)據(jù)的過程04.使用ES6的展開運(yùn)算符簡(jiǎn)化傳遞props數(shù)據(jù)的過程

新方法：<Hello?{...dog}></Hello>

以 三個(gè)... ?展開運(yùn)算符，將某一個(gè)對(duì)象的值展開給其他的對(duì)象使用

const?o2?= {

name :?'大黃',

...o1

}

?

4. 組件的首字母名稱必須大寫

?

?

5.創(chuàng)建組件的第二種方式，將組件抽離為單獨(dú)的文件

第一步，單獨(dú)抽取出來，

import?React?from?'react'???//第一步，必須

//創(chuàng)建組件的第二種方式，

//抽取出來，放到 .jsx 中

function?Hello?(props){

//如果在一個(gè)組件中return 一個(gè)null， 表示空組建，什么都不渲染，

//return null;

//這種以對(duì)象或者函數(shù)的方式創(chuàng)建的組件，必須返回一些內(nèi)容，實(shí)在不行，也要返回

//一個(gè)空內(nèi)容

//使用的時(shí)候，/*將組件的名稱，直接以標(biāo)簽的形式丟到頁面上即可*/

console.log(props);

props.testage?=15; //試圖賦值

props.testcolor?= '白色'

return?<div>返回一個(gè)h11111--{props.testage}--{props.testcolor}</div>;

}

?

//然后暴露出去，

export?default?Hello???//暴露也是必須的

?

第二步，在需要的index.js 等文件中進(jìn)行導(dǎo)入。

import?Hello?from?'./components/Hello.jsx

?

6..配置webpack從而在導(dǎo)入組件的時(shí)候，省略.jsx后綴名

在webpack.config.js 中進(jìn)行相關(guān)配置，增加一個(gè)resolve 節(jié)點(diǎn)，配置，extensions 屬性

resolve :{

extensions :['.js','.jsx','.json'] //表示這幾個(gè)文件的后綴名，可以省略不寫，

}

?

?

7. 通過 alias ?配置相關(guān)別名。

?

?

8.使用class 的相關(guān)學(xué)習(xí)

8.1 創(chuàng)建類，

8.2 實(shí)例屬性（構(gòu)造器中），靜態(tài)屬性（類上）， ??---靜態(tài)的實(shí)例訪問不到

8.3 實(shí)例方法，（掛載是原型實(shí)例上的） ?靜態(tài)方法（掛載在構(gòu)造函數(shù)中的）

?

9.繼承的學(xué)習(xí)，構(gòu)造器，extends ， super 等的學(xué)習(xí)

?

?

11.基于class 關(guān)鍵字的創(chuàng)建組件

//1.繼承React.Component ?//2.返回一個(gè)JSX 虛擬DOM結(jié)構(gòu)

?

class 組件名稱　extends React.Component {

render (){

return <div>這個(gè)是由class 關(guān)鍵字創(chuàng)建的組件</div>

}

}

//使用class 關(guān)鍵字創(chuàng)建組件

class?Movie?extends?React.Component{

//render 函數(shù)的作用，渲染當(dāng)前組件對(duì)應(yīng)的虛擬DOM結(jié)構(gòu)

render(){

//這里必須返回一個(gè)JSX 虛擬DOM結(jié)構(gòu)

//return null;

return?<div>test DIV　</div>

}

}

?

傳遞值： 也是有兩種方式，

//學(xué)習(xí) React 中創(chuàng)建組件

import?React?from?'react'

import?ReactDOM?from?'react-dom'

?

// import './components/Test.js'

?

//使用class 關(guān)鍵字創(chuàng)建組件

class?Movie?extends?React.Component{

//render 函數(shù)的作用，渲染當(dāng)前組件對(duì)應(yīng)的虛擬DOM結(jié)構(gòu)

render(){

//這里必須返回一個(gè)JSX 虛擬DOM結(jié)構(gòu)

//return null;

return?<div>test DIV 組件　

{this.props.name}?--{this.props.time}

{/* class 創(chuàng)建的組件中，直接使用this.props.name 調(diào)用就行。 */}

</div>

}

}

const?dianying?= {

name :?'我不是妖神',

time :?120

}

ReactDOM.render(<div>

{/*將組件的名稱，直接以標(biāo)簽的形式丟到頁面上即可*/}

{/* <Movie name={dianying.name} time={dianying.time}></Movie>*/}

<Movie?{...dianying}></Movie>?

?

</div>,document.getElementById('app'));

?

?

?

12.class 創(chuàng)建的組件的 function 創(chuàng)建的組件的區(qū)別

12.1 使用class 關(guān)鍵字創(chuàng)建的組件，有自己的私有數(shù)據(jù)和生命周期函數(shù)，

12.2 function 創(chuàng)建的組件，只有通過外界傳遞的props ，沒有自己的私有數(shù)據(jù)和生命周期函數(shù)。

12.3 ?class 創(chuàng)建的叫做有狀態(tài)組件，function 創(chuàng)建的叫做無狀態(tài)組件，本質(zhì)區(qū)別就是有無state 屬性和生命周期函數(shù)。

12.4 如果一個(gè)組件需要有自己的私有數(shù)據(jù)，推薦使用class 創(chuàng)建組件，如果一個(gè)組件不需要私有數(shù)據(jù)，則推薦使用無狀態(tài)組件。

12.5 props 是不可修改的，state的是可以修改的

//學(xué)習(xí) React 中創(chuàng)建組件

import?React?from?'react'

import?ReactDOM?from?'react-dom'

?

// import './components/Test.js'

?

//使用class 關(guān)鍵字創(chuàng)建組件

class?Movie?extends?React.Component{

constructor(){

//由于Movie 組件集成了React.Component 父類，因此需要調(diào)用super，

super();

this.state?= {

msg :?'大家好，這個(gè)是自己的私有數(shù)據(jù)哦！'

} //相當(dāng)于VUE組件中的data () {return {}}數(shù)據(jù)組件，

?

}

//render 函數(shù)的作用，渲染當(dāng)前組件對(duì)應(yīng)的虛擬DOM結(jié)構(gòu)

render(){

//這里必須返回一個(gè)JSX 虛擬DOM結(jié)構(gòu)

//return null;

this.props.name?= '李斯'

return?<div>test DIV 組件　

{this.props.name}?--{this.props.time}

<hr/>

{this.state.msg}

{/* class 創(chuàng)建的組件中，直接使用this.props.name 調(diào)用就行。 */}

</div>

}

}

?

const?dianying?= {

name :?'我不是妖神',

time :?120

}

ReactDOM.render(<div>

{/*將組件的名稱，直接以標(biāo)簽的形式丟到頁面上即可*/}

{/* <Movie name={dianying.name} time={dianying.time}></Movie>*/}

<Movie?{...dianying}></Movie>?

</div>,document.getElementById('app'));

?

?

13.案例， 實(shí)現(xiàn)一個(gè)評(píng)論組件

13.1 創(chuàng)建組件的一個(gè)模板

import React from ‘react’

import ReactDOM from ‘react-dom’

?class Cmt extends React.Component {

constructor (){

super();

this.state = { }

}

render (){

return <div></div>

}

}

?

React.render(<div></div>.document.getElementById(‘a(chǎn)pp’))

13.2 ?具體內(nèi)容

//學(xué)習(xí) React 中創(chuàng)建組件

import?React?from?'react'

import?ReactDOM?from?'react-dom'

//定義父組件

class?CmtList?extends?React.Component{

constructor(){

super();

this.state?= {

CommentList :?[

{id :?0, user :?'段振春',content :'我愛python'},

{id :?1, user :?'蔡州',content :'我愛java'},

{id :?2, user :?'丁林',content :'我C++'},

{id :?3, user :?'劉毅',content :'我愛PHP'},

{id :?4, user :?'沁雄',content :'我愛JS'},

]

};

}

render?(){

return?<div>

<h1>這個(gè)是評(píng)論列表組件</h1>

{/*循環(huán)展示數(shù)據(jù)*/}

{this.state.CommentList.map(item?=>?<div?key={item.id}>

<h1>評(píng)論人 ：{item.user}</h1>

<p>評(píng)論內(nèi)容 ：{item.content}</p>

?

</div>)}

</div>

}

}

?

ReactDOM.render(<div>

<CmtList></CmtList>

</div>,document.getElementById('app'));

?

改進(jìn)版： ??將每一個(gè)評(píng)論內(nèi)容變成無狀態(tài)組件

//第一步導(dǎo)包

import?React?from?'react'

import?ReactDOM?from?'react-dom'

?

//使用function 創(chuàng)建無狀態(tài)組件

function?CmtItem(props){

return?<div?key={props.id}>

<h1>評(píng)論人：{props.user}</h1>

<p>評(píng)論內(nèi)容：{props.content}</p>

</div>

}

?

//使用class 創(chuàng)建有狀態(tài)組件

class?CmtList?extends?React.Component{

constructor(){

super();

this.state?= {

CommentsList :?[

{id :?0,user :'大周',content :'我是出勤員'},

{id :?1,user :'康康',content :'我是硬件碼農(nóng)'},

{id :?2,user :'佩佩',content :'我是佩奇'},

{id :?3,user :'翠翠',content :'我是小翠翠'},

]

}

}

render(){

return?<div>

<h1>這個(gè)是一個(gè)評(píng)論列表組件</h1>

{/* {this.state.CommentsList.map(item => <div key={item.id}>

<h3>評(píng)論人：{item.user}</h3>

<p>評(píng)論內(nèi)容:{item.content}</p>

</div>)} */}

{this.state.CommentsList.map(item?=>?<CmtItem?{...item}></CmtItem>)}

</div>

}

}

//最后一個(gè)，進(jìn)行DOM的渲染

ReactDOM.render(<div>

<CmtList></CmtList>

</div>,document.getElementById('app'));

?

?

14.繼續(xù)簡(jiǎn)化，進(jìn)行抽離。

抽離需要注意兩點(diǎn)：

第一點(diǎn)： 引入React，以及相關(guān)依賴的子組件

第二點(diǎn)： 暴露出去。

CmtItem.jsx

//第一步，引入

import?React?from?'react'

?

//第二步，暴露出去

//使用function 創(chuàng)建無狀態(tài)組件

export?default?function?CmtItem?(props){

return?<div>

<h1>評(píng)論人：{props.user}</h1>

<p>評(píng)論內(nèi)容：{props.content}</p>

</div>

}

CmtList.jsx

?

//第一步，引包

import?React?from?'react'

//導(dǎo)入子組件

import?CmtItem?from?'./CmtItem'

//第二步，暴露

export?default?class?CmtList?extends?React.Component{

constructor(){

super();

this.state?= {

CommentsList :?[

{id :?0,user :'大周',content :'我是出勤員'},

{id :?1,user :'康康',content :'我是硬件碼農(nóng)'},

{id :?2,user :'佩佩',content :'我是佩奇'},

{id :?3,user :'翠翠',content :'我是小翠翠'},

]

}

}

render(){

return?<div>

<h1>這個(gè)是一個(gè)評(píng)論列表組件</h1>

{/* {this.state.CommentsList.map(item => <div key={item.id}>

<h3>評(píng)論人：{item.user}</h3>

<p>評(píng)論內(nèi)容:{item.content}</p>

</div>)} */}

{this.state.CommentsList.map(item?=>?<CmtItem?{...item}></CmtItem>?)}

</div>

}

}

?

?

15. ?配置webpack設(shè)置根目錄..@ 符號(hào)配置。配置到src ?目錄。

?

?

?

?

16.

?

?

17.

?

?

?

18.

?

?

?

總結(jié)

以上是生活随笔為你收集整理的React  学习第二天 2018-07-21的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。