手機(jī)站首頁散文詩歌雜文隨筆日記小小說

散文網(wǎng) » 生活 »日常 » 含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】

2021-05-01 19:32 作者:詩書畫唱 0人讀過 | 我要投稿

作業(yè)

1、定義一個(gè)標(biāo)簽，創(chuàng)建一個(gè)cat對(duì)象，包含name，age和color，定義一個(gè)組件顯示這只貓的所有屬性值。

2、創(chuàng)建一個(gè)商品數(shù)組，通過table和<tr>顯示這個(gè)數(shù)組中的所有商品信息。

3、創(chuàng)建一個(gè)科目數(shù)組，包含科目和成績(jī)屬性，通過父子組件<ul>和<li>標(biāo)簽顯示其中的內(nèi)容

4、將全班同學(xué)的名字放到一個(gè)數(shù)組中，設(shè)計(jì)一個(gè)組件，依次顯示這些同學(xué)的姓名，當(dāng)顯示到最后一個(gè)同學(xué)以后再次從第一個(gè)同學(xué)開始顯示

5、下拉框默認(rèn)選中

6、商品列表

視頻學(xué)習(xí)記錄

super（）調(diào)用父類的構(gòu)造方法，this.state就是狀態(tài)機(jī)

state，狀態(tài)機(jī)

掛載和卸載

生命周期函數(shù)（鉤子函數(shù)）

計(jì)算器代碼執(zhí)行順序

面試題等等?？疾閮?nèi)容：箭頭函數(shù)內(nèi)部的this和外部函數(shù)的this指向同一個(gè)對(duì)象

ReactJS componentWillUnmount()用法及代碼示例

生命周期函數(shù)也叫鉤子函數(shù)

講義：

一、自定義組件的三種方法

二、設(shè)置組件屬性的默認(rèn)值

三、單選框和多選框的默認(rèn)選中設(shè)置

四、下拉框

五、...擴(kuò)展運(yùn)算符

Reactjs的組件：將一系列的Html或者組件封裝成一個(gè)自定義的標(biāo)簽

組件的屬性：在組件內(nèi)部通過this關(guān)鍵字可以點(diǎn)出來的屬性

props:props對(duì)象中的所有的屬性是不能夠被修改的

state:狀態(tài)機(jī)

children

ref

mount：掛載

生命周期方法（鉤子函數(shù)）

props屬性處理數(shù)組.html

擴(kuò)展操作符.html

通過計(jì)數(shù)器學(xué)習(xí)state.html

組件的props屬性.html

組件屬性的默認(rèn)值.html

作業(yè)

1、定義一個(gè)標(biāo)簽，創(chuàng)建一個(gè)cat對(duì)象，包含name，age和color，定義一個(gè)組件顯示這只貓的所有屬性值。

<!DOCTYPE html>

<html>

<head>

let cat = {

name: '詩書畫唱家的神貓',

age: 666,

color:"黃色"

};

class ShowAllValue extends React.Component{

render(){

return <b>

? ? ? ? ?{this.props.name}? {this.props.age}? {this.props.color}

? ? ? ? ? ?</b>;

}

ReactDOM.render(<ShowAllValue {...cat} />,

? ? document.getElementById('id1'));

</script>

</head>

<body>

</body>

</html>

2、創(chuàng)建一個(gè)商品數(shù)組，通過table和<tr>顯示這個(gè)數(shù)組中的所有商品信息。

<!DOCTYPE html>

<html>

<head>

//方法一：使用父子組件來渲染

//子組件：

class TrZuJian extends React.Component{

render(){

return <tr? >

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>{this.props.name}</td>

? ? <td>{this.props.price}</td>

? ? ? ? ? ?</tr>;

}

//父組件：

class TableZuJian extends React.Component{

render(){

const arr =[{name:'詩書畫唱牌商品1',price:666},{name:'詩書畫唱牌商品2',price:888}];

? ? ? ? ? ? ? ? ? ? let Newdata= arr.map(o => (<TrZuJian key={o.name} name={o.name} price={o.price} />));

return <table border="1px"><tbody>{Newdata}</tbody></table> ? ? ? ? ? ?

? ? ? ? ? ?

}

ReactDOM.render(<TableZuJian />,document.getElementById('id1'));

//方法二：使用一個(gè)組件來渲染

class TableZuJian2 extends React.Component{

render(){

const arr =[{name:'詩書畫唱牌商品1',price:666},{name:'詩書畫唱牌商品2',price:888}];

? ? ? ? ? ? ? ? ? ? let Newdata= arr.map(o =>?

? ? ? ? ? ? ? ? ? ? (<tr? >

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>{o.name}</td>

? ? <td>{o.price}</td>

? ? ? ? ? ?</tr>));

return <table border="1px"><tbody>{Newdata}</tbody></table> ? ? ? ? ? ?

? ? ? ? ? ?

}

ReactDOM.render(<TableZuJian2 />,document.getElementById('id2'));

</script>

</head>

<body>

方法一：使用父子組件來渲染

<br />

方法二：使用一個(gè)組件來渲染

</body>

</html>

3、創(chuàng)建一個(gè)科目數(shù)組，包含科目和成績(jī)屬性，通過父子組件<ul>和<li>標(biāo)簽顯示其中的內(nèi)容

<!DOCTYPE html>

<html>

<head>

//單詞：score（得分） subject（科目）

//使用父子組件來渲染：

//子組件：

class LiZuJian extends React.Component{

render(){

return <li>{this.props.subject}? {this.props.score}</li>

? ? ? ? ? ? ? ? ?;

}

//父組件：

class UlZuJian extends React.Component{

render(){

? ? ? ? ? ? ? const arr =[{subject:'詩書畫唱牌商品1',score:666},{subject:'詩書畫唱牌商品2',score:888}];

? ? ? ? let Newdata= arr.map(o => (<LiZuJian key={o.subject} subject={o.subject} score={o.score} />));

? return <ul>{Newdata}</ul> ? ? ? ? ? ?

? ? ? ? ? ?

}

ReactDOM.render(<UlZuJian />,document.getElementById('id1'));

</script>

</head>

<body>

</body>

</html>

4、將全班同學(xué)的名字放到一個(gè)數(shù)組中，設(shè)計(jì)一個(gè)組件，依次顯示這些同學(xué)的姓名，當(dāng)顯示到最后一個(gè)同學(xué)以后再次從第一個(gè)同學(xué)開始顯示

<!DOCTYPE html>

<html>

<head>

class ZuJian extends React.Component{

//constructor是組件的構(gòu)造方法：

constructor(){

//super可以調(diào)用父類的構(gòu)造方法：

super();

//用this.state添加一個(gè)狀態(tài)：

this.state = {

num:0,

arr: ["詩書畫唱","三連","點(diǎn)贊","投幣","關(guān)注"]

};

}

//生命周期函數(shù)也叫鉤子函數(shù)。

//當(dāng)組件掛載以后調(diào)用這個(gè)函數(shù):

componentDidMount(){

//箭頭函數(shù)內(nèi)部的this和外部函數(shù)的this指向同一個(gè)對(duì)象：

? ? ? ? ? ? ? ? ? ? this.iv = setInterval(() => {

//必須調(diào)用setState方法才能使組件刷新：? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? this.setState({

?/*這里的this.state.arr.length-1用上random生成0到數(shù)組長(zhǎng)度減1的隨機(jī)數(shù)后,

?就實(shí)現(xiàn)了隨機(jī)點(diǎn)名器,界面自己可以再設(shè)計(jì),美化:*/

num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? },1000);

}

//當(dāng)組件被卸載時(shí)調(diào)用：

componentWillUnmount(){

//同時(shí)清除setInterval函數(shù)：

//如果this.iv有值時(shí)執(zhí)行clearInterval(this.iv);

if(this.iv) {

clearInterval(this.iv);

}

render(){

return (<div>

? ? ? ? <h1>顯示的名字:</h1>

? ? ? ? <h2>{this.state.num} {this.state.arr[this.state.num]}</h2>

? ? ? ? </div>);

}

//通過ReactDOM.render的<ZuJian />來掛載ZuJian這個(gè)組件后會(huì)自動(dòng)執(zhí)行componentDidMount中的內(nèi)容:

ReactDOM.render(<ZuJian />,

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

5、下拉框默認(rèn)選中

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--<select >

</select>-->

//1、下拉框默認(rèn)選中

class MyOption extends React.Component{

constructor(props){

super(props);

}

render() {

return <option value={this.props.cid}? selected={this.props.selected} >{this.props.cname}</option>

}

class MySel extends React.Component{

constructor(props){

super(props);

}

render() {

?const cityArr = [{id:1,name:'長(zhǎng)沙'},{id:2,name:'湘潭'},{id:3,name:'株洲'}];

? //補(bǔ)全代碼:設(shè)置湘潭為默認(rèn)選中

const cityItems =cityArr.map(o =>(

? ? ? o.id==2?<MyOption? key={o.id}

? ? ? ? ? ? cname={o.name} cid={o.id}? selected="selected" /> :

<MyOption? key={o.id}

cname={o.name} cid={o.id}? />?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )? );

return (<select >{cityItems}</select>);

}

ReactDOM.render(< MySel />,document.getElementById('myDiv'));

// MyOption.defaultProps = {

// selected:"selected";

// };

// selected="selected"

//cityArr[1].push="selected";

//document.getElementsByTagName("option")[1];

//console.log(document.getElementsByTagName("option")[0])??

//console.log(<select? >{cityItems}</select>)

// console.log(<MyOption/> )

//var a=document.getElementsByTagName("option");

//console.log( [...a]);

//console.log(document.getElementById('湘潭'))

</script>

</body>

</html>

6、商品列表

<!DOCTYPE html>

<html>

<head>

<style>

img{width: 100px;height: 100px;}

</style>

</head>

<body>

//2、商品列表

class MyTr extends React.Component{

constructor(props){

super(props);

}

render() {

return (<tr>

? ? ? ? <td>{this.props.pname}</td>

? ? ? ? <td>{this.props.price}</td>

? ? ? ? <td><img src={this.props.src} /></td>

? ? </tr>);

}

class MyTab extends React.Component{

constructor(props){

super(props);

}

render() {

const proData = {"total":3,"rows":[

? ?{pname:'爆米花',price:20.0,src:'1.png'},

? ?{pname:'辣條',price:4.9,src:'2.png'},

? ?{pname:'薯片',price:15.0,src:'3.png'}]}

//補(bǔ)全代碼

return (<table border="1px">{proData.rows.map(o => (< MyTr? key={o.pname}?

pname={o.pname} price={o.price}? src={o.src} /> ))}</table>);

}

ReactDOM.render(<MyTab />,document.getElementById('myDiv'));

</script>

</body>

</html>

視頻學(xué)習(xí)記錄

props是object普通對(duì)象的類型。

super（）調(diào)用父類的構(gòu)造方法，this.state就是狀態(tài)機(jī)。

計(jì)算器代碼執(zhí)行順序

面試題等等常考查內(nèi)容：箭頭函數(shù)內(nèi)部的this和外部函數(shù)的this指向同一個(gè)對(duì)象

ReactJS componentWillUnmount()用法及代碼示例

生命周期函數(shù)也叫鉤子函數(shù)

props屬性處理數(shù)組.html

<!DOCTYPE html>

<html>

<head>

//自定義的選項(xiàng)組件

class Item extends React.Component{

render(){

return <option>{this.props.cname}</option>;

}

//自定義的下拉框組件

class Sel extends React.Component{

render(){

const arr = ['長(zhǎng)沙','株洲','湘潭'];

let items = [];

for(let i = 0;i < arr.length;i ++) {

let cn = arr[i];

let e = <Item cname={cn} />;

items[i] = e;

}

//? ? ? ? ? ? ? ? ? let items = arr.map(cn => <Item key={cn} cname={cn} />);

? ? ? ? ? ? ? ? ??

return <select >{items}</select>;

}

}?

ReactDOM.render(<Sel />,document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

擴(kuò)展操作符.html

<!DOCTYPE html>

<html>

<head>

class Product extends React.Component{

render(){

return <a href="#">

? ? ? ? ? ?{this.props.id}{this.props.pname}:{this.props.price}/{this.props.unit}

? ? ? ? ? ?</a>;

}

let pro = {

pname: '德芙巧克力',

price: 8.5,

id: 4,

unit: '塊'

};

//ReactDOM.render(<Product pname="德芙巧克力" price="8.5" id="4" />,

ReactDOM.render(<Product {...pro} />,

? ? document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

通過計(jì)數(shù)器學(xué)習(xí)state.html

<!DOCTYPE html>

<html>

<head>

class Counter extends React.Component{

//組件的構(gòu)造方法

constructor(){

//調(diào)用父類的構(gòu)造方法

super();

//添加一個(gè)狀態(tài)

this.state = {

num: 0

};

}

//生命周期函數(shù)（鉤子函數(shù)）

//當(dāng)組件掛載以后調(diào)用這個(gè)函數(shù)

componentDidMount(){

//console.log(this);//當(dāng)前組件

// let that = this;

// this.iv = setInterval(function(){

// //console.log(this);//window

// //必須調(diào)用setState方法才能使組件刷新

// that.setState({

// num: ++ that.state.num

// });

// },1000);

? ? ? ? ? ? ? ? ? ? //箭頭函數(shù)內(nèi)部的this和外部函數(shù)的this指向同一個(gè)對(duì)象

? ? ? ? ? ? ? ? ? ? this.iv = setInterval(() => {

? ? ? ? ? ? ? ? ? ? this.setState({

? ? ? ? ? ? ? ? ? ? num: ++ this.state.num

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? },1000);

}

//當(dāng)組件被卸載時(shí)調(diào)用

componentWillUnmount(){

//同時(shí)清除setInterval函數(shù)

if(this.iv) {

clearInterval(this.iv);

}

render(){

return (<div>

? ? ? ? <h1>計(jì)數(shù)器組件</h1>

? ? ? ? <h2>{this.state.num}</h2>

? ? ? ? </div>);

}

ReactDOM.render(<Counter />,

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

組件的props屬性.html

<!DOCTYPE html>

<html>

<head>

? ? ? ? ? ? //給自定義的標(biāo)簽中添加自定義的屬性

? ? ? ? ? ? //方法一：

//? ? ? ? ? function Stu(props){

//? ? ? ? ? return <h1>姓名是:{props.name},年齡是:{props.age},性別是:{props.sex}</h1>;

//? ? ? ? ? }

? ? ? ? ? ? //方法二：

? ? ? ? ? ? class Stu extends React.Component{

? ? ? ? ? ? render(){

? ? ? ? ? ? //this.props中的props屬性不能夠改

? ? ? ? ? ? return <h1>姓名是:{this.props.name},年齡是:{this.props.age},性別是:{this.props.sex}</h1>;

? ? ? ? ? ? }

? ? ? ? ? ? ReactDOM.render(<Stu name="Kite" age="18" sex="女" />,

? ? ? ? ? ? ? ? document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

組件屬性的默認(rèn)值.html

<!DOCTYPE html>

<html>

<head>

class Address extends React.Component{

render(){

//this.props中的所有的屬性是不能夠修改的

//this.props.prov = '廣東';//報(bào)錯(cuò)

return <h1>收貨地址:{this.props.prov}省{this.props.city}市</h1>;

}

//給Address組件的prov和city屬性設(shè)置默認(rèn)值

Address.defaultProps = {

prov: '江西',

city: '宜春'

};

ReactDOM.render(<Address prov="湖北" city="武漢" />,

? ? document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

標(biāo)簽：

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】的評(píng)論 (共條)

愛情散文傷感散文哲理散文優(yōu)美生活隨筆親情唯美句子傷感的句子現(xiàn)代詩歌空間日志經(jīng)典語句愛情句子作文大全

最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】的評(píng)論 (共條)

你可能也喜歡這些文章

最新發(fā)布的文章

最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】

本文作者的其他文章

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】的評(píng)論 (共 條)

你可能也喜歡這些文章

最新發(fā)布的文章

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】

含面試題：生命周期，鉤子函數(shù)，prosp，state狀態(tài)機(jī)，掛載卸載，父子組件【詩書畫唱】的評(píng)論 (共條)