當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React 学习第二天 2018-07-21

發布時間：2024/10/8 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 React 学习第二天 2018-07-21 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

React ?學習第二天

我這個React 學習存在以下毛病

1.不報錯，

2.不能自動熱加載，不能自動刷新

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

1.Vue 和React的關于 key ?的區別

1.1 使用v-for 和map 的時候，盡量使用key 進行綁定，否則會產生相關的紊亂。

1.2 react 中，在進行forEach 循環/for 循環/ map 時，需要添加 key 給相關控制的元素。

數組的forEach ?和數組的 map ?方法。

forEach 遍歷每一項，然后進行相關的操作，

map 遍歷每一項，然后生成一個新的數組，會有返回值，需要接收。

//方案一，數組的forEach 方法

arrStr.forEach(item?=>{

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

nameStr.push(temp);

})

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

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

return?item+ '---'

});

console.log(result);

2.JSX 語法中的注釋。

{/* 這個是注釋一*/}

{

//這個是注釋?二 ?

}

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

for -->>> htmlFor ?

//假設main.js 是入口文件，

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

//1.導入包名。

import?React?from?'react'?//創建組件，創建虛擬DOM，生命周期的相關，

import?ReactDOM?from?'react-dom'?//渲染到頁面展示相關，

//2. 創建虛擬的DOM 元素，

//第一個參數，創建元素的標簽類型，

//第二個參數是節點的屬性，

//第三個參數是標簽的子元素，或者內容

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

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

// const div1 = <div>這個是一個div

// <h1 >這個是h1</h1>

// </div>

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

//第一個參數，渲染誰，

//第二個參數，渲染的容器，

let?a?= 10?///等價于 const a = 10

let?str?= '您好，劉送杰同學';

const?h1?= <h1>這個是一h1</h1>

const?arr?= [

<h1>第一個</h1>,

];

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

const?nameStr?= [];

//方案一，數組的forEach 方法

arrStr.forEach(item?=>{

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

nameStr.push(temp);

})

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

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

return?item+ '---'

});

//console.log(result);

ReactDOM.render(<div>

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

<hr/>{h1}

{/* 這個是注釋*/}

{

//這個是注釋

}

<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'))

//上面這個方式比較復雜，不人性化

//const h11= <div>這個是一個div</div>，但是不能解析，需要相關的包，需要使用bable 進行轉換。

3.React 中創建組件的方式

3.1 第一種

第一步，創建

function?Hello?(){

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

//return null;

//這種以對象或者函數的方式創建的組件，必須返回一些內容，實在不行，也要返回

//一個空內容

//使用的時候，/*將組件的名稱，直接以標簽的形式丟到頁面上即可*/

return?<h1>返回一個h1</h1>;

}

第二步，傳遞數據，

定義好數據，const dog =｛｝

先在<Hello name={dog.name}></Hello>，通過屬性進行傳遞傳遞數據

然后在組件內部取，props.name ?props.age

//構造函數中接收外在函數傳遞的數值。

function?Hello?(props){

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

//return null;

//這種以對象或者函數的方式創建的組件，必須返回一些內容，實在不行，也要返回

//一個空內容

//使用的時候，/*將組件的名稱，直接以標簽的形式丟到頁面上即可*/

console.log(props);

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

props.testcolor?= '白色'

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

}

const?dog?={

age :?123,

name :?'大黃',

color :'黃色'

}

ReactDOM.render(<div>

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

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

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

上；述方式的缺點：就是傳遞屬性的個數有限，如果傳遞多個，寫起來不好看

使用ES6的展開運算符簡化傳遞props數據的過程04.使用ES6的展開運算符簡化傳遞props數據的過程

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

以三個... ?展開運算符，將某一個對象的值展開給其他的對象使用

const?o2?= {

name :?'大黃',

...o1

}

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

5.創建組件的第二種方式，將組件抽離為單獨的文件

第一步，單獨抽取出來，

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

//創建組件的第二種方式，

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

function?Hello?(props){

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

//return null;

//這種以對象或者函數的方式創建的組件，必須返回一些內容，實在不行，也要返回

//一個空內容

//使用的時候，/*將組件的名稱，直接以標簽的形式丟到頁面上即可*/

console.log(props);

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

props.testcolor?= '白色'

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

}

//然后暴露出去，

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

第二步，在需要的index.js 等文件中進行導入。

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

6..配置webpack從而在導入組件的時候，省略.jsx后綴名

在webpack.config.js 中進行相關配置，增加一個resolve 節點，配置，extensions 屬性

resolve :{

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

}

7. 通過 alias ?配置相關別名。

8.使用class 的相關學習

8.1 創建類，

8.2 實例屬性（構造器中），靜態屬性（類上）， ??---靜態的實例訪問不到

8.3 實例方法，（掛載是原型實例上的） ?靜態方法（掛載在構造函數中的）

9.繼承的學習，構造器，extends ， super 等的學習

11.基于class 關鍵字的創建組件

//1.繼承React.Component ?//2.返回一個JSX 虛擬DOM結構

class 組件名稱　extends React.Component {

render (){

return <div>這個是由class 關鍵字創建的組件</div>

}

//使用class 關鍵字創建組件

class?Movie?extends?React.Component{

//render 函數的作用，渲染當前組件對應的虛擬DOM結構

render(){

//這里必須返回一個JSX 虛擬DOM結構

//return null;

return?<div>test DIV　</div>

}

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

//學習 React 中創建組件

import?React?from?'react'

import?ReactDOM?from?'react-dom'

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

//使用class 關鍵字創建組件

class?Movie?extends?React.Component{

//render 函數的作用，渲染當前組件對應的虛擬DOM結構

render(){

//這里必須返回一個JSX 虛擬DOM結構

//return null;

return?<div>test DIV 組件　

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

{/* class 創建的組件中，直接使用this.props.name 調用就行。 */}

</div>

}

const?dianying?= {

name :?'我不是妖神',

time :?120

}

ReactDOM.render(<div>

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

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

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

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

12.class 創建的組件的 function 創建的組件的區別

12.1 使用class 關鍵字創建的組件，有自己的私有數據和生命周期函數，

12.2 function 創建的組件，只有通過外界傳遞的props ，沒有自己的私有數據和生命周期函數。

12.3 ?class 創建的叫做有狀態組件，function 創建的叫做無狀態組件，本質區別就是有無state 屬性和生命周期函數。

12.4 如果一個組件需要有自己的私有數據，推薦使用class 創建組件，如果一個組件不需要私有數據，則推薦使用無狀態組件。

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

//學習 React 中創建組件

import?React?from?'react'

import?ReactDOM?from?'react-dom'

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

//使用class 關鍵字創建組件

class?Movie?extends?React.Component{

constructor(){

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

super();

this.state?= {

msg :?'大家好，這個是自己的私有數據哦！'

} //相當于VUE組件中的data () {return {}}數據組件，

}

//render 函數的作用，渲染當前組件對應的虛擬DOM結構

render(){

//這里必須返回一個JSX 虛擬DOM結構

//return null;

this.props.name?= '李斯'

return?<div>test DIV 組件　

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

<hr/>

{this.state.msg}

{/* class 創建的組件中，直接使用this.props.name 調用就行。 */}

</div>

}

const?dianying?= {

name :?'我不是妖神',

time :?120

}

ReactDOM.render(<div>

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

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

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

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

13.案例，實現一個評論組件

13.1 創建組件的一個模板

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(‘app’))

13.2 ?具體內容

//學習 React 中創建組件

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>這個是評論列表組件</h1>

{/*循環展示數據*/}

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

<p>評論內容：{item.content}</p>

</div>)}

</div>

}

ReactDOM.render(<div>

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

改進版： ??將每一個評論內容變成無狀態組件

//第一步導包

import?React?from?'react'

import?ReactDOM?from?'react-dom'

//使用function 創建無狀態組件

function?CmtItem(props){

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

<h1>評論人：{props.user}</h1>

<p>評論內容：{props.content}</p>

</div>

}

//使用class 創建有狀態組件

class?CmtList?extends?React.Component{

constructor(){

super();

this.state?= {

CommentsList :?[

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

{id :?1,user :'康康',content :'我是硬件碼農'},

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

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

]

}

render(){

return?<div>

<h1>這個是一個評論列表組件</h1>

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

<p>評論內容:{item.content}</p>

</div>)} */}

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

</div>

}

//最后一個，進行DOM的渲染

ReactDOM.render(<div>

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

14.繼續簡化，進行抽離。

抽離需要注意兩點：

第一點：引入React，以及相關依賴的子組件

第二點：暴露出去。

CmtItem.jsx

//第一步，引入

import?React?from?'react'

//第二步，暴露出去

//使用function 創建無狀態組件

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

return?<div>

<h1>評論人：{props.user}</h1>

<p>評論內容：{props.content}</p>

</div>

}

CmtList.jsx

//第一步，引包

import?React?from?'react'

//導入子組件

import?CmtItem?from?'./CmtItem'

//第二步，暴露

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

constructor(){

super();

this.state?= {

CommentsList :?[

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

{id :?1,user :'康康',content :'我是硬件碼農'},

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

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

]

}

render(){

return?<div>

<h1>這個是一個評論列表組件</h1>

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

<p>評論內容:{item.content}</p>

</div>)} */}

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

</div>

}

15. ?配置webpack設置根目錄..@ 符號配置。配置到src ?目錄。

16.

17.

18.

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。