含面试题：生命周期，钩子函数，prosp，state状态机，挂载卸载，父子组件【诗书画唱】

2021-05-01 19:32 作者:诗书画唱 0人读过 | 我要投稿

作业

1、定义一个标签，创建一个cat对象，包含name，age和color，定义一个组件显示这只猫的所有属性值。

2、创建一个商品数组，通过table和<tr>显示这个数组中的所有商品信息。

3、创建一个科目数组，包含科目和成绩属性，通过父子组件<ul>和<li>标签显示其中的内容

4、将全班同学的名字放到一个数组中，设计一个组件，依次显示这些同学的姓名，当显示到最后一个同学以后再次从第一个同学开始显示

5、下拉框默认选中

6、商品列表

视频学习记录

super（）调用父类的构造方法，this.state就是状态机

state，状态机

挂载和卸载

生命周期函数（钩子函数）

计算器代码执行顺序

面试题等等常考查内容：箭头函数内部的this和外部函数的this指向同一个对象

ReactJS componentWillUnmount()用法及代码示例

生命周期函数也叫钩子函数

讲义：

一、自定义组件的三种方法

二、设置组件属性的默认值

三、单选框和多选框的默认选中设置

四、下拉框

五、...扩展运算符

Reactjs的组件：将一系列的Html或者组件封装成一个自定义的标签

组件的属性：在组件内部通过this关键字可以点出来的属性

props:props对象中的所有的属性是不能够被修改的

state:状态机

children

ref

mount：挂载

生命周期方法（钩子函数）

props属性处理数组.html

扩展操作符.html

通过计数器学习state.html

组件的props属性.html

组件属性的默认值.html

作业

1、定义一个标签，创建一个cat对象，包含name，age和color，定义一个组件显示这只猫的所有属性值。

<!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、创建一个商品数组，通过table和<tr>显示这个数组中的所有商品信息。

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

//方法二：使用一个组件来渲染

class TableZuJian2 extends React.Component{

render(){

const arr =[{name:'诗书画唱牌商品1',price:666},{name:'诗书画唱牌商品2',price:888}];

let Newdata= arr.map(o =>

(<tr >

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

</tr>));

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

}

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

</script>

</head>

<body>

方法一：使用父子组件来渲染

<br />

方法二：使用一个组件来渲染

</body>

</html>

3、创建一个科目数组，包含科目和成绩属性，通过父子组件<ul>和<li>标签显示其中的内容

<!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、将全班同学的名字放到一个数组中，设计一个组件，依次显示这些同学的姓名，当显示到最后一个同学以后再次从第一个同学开始显示

<!DOCTYPE html>

<html>

<head>

class ZuJian extends React.Component{

//constructor是组件的构造方法：

constructor(){

//super可以调用父类的构造方法：

super();

//用this.state添加一个状态：

this.state = {

num:0,

arr: ["诗书画唱","三连","点赞","投币","关注"]

};

}

//生命周期函数也叫钩子函数。

//当组件挂载以后调用这个函数:

componentDidMount(){

//箭头函数内部的this和外部函数的this指向同一个对象：

this.iv = setInterval(() => {

//必须调用setState方法才能使组件刷新：

this.setState({

/*这里的this.state.arr.length-1用上random生成0到数组长度减1的随机数后,

就实现了随机点名器,界面自己可以再设计,美化:*/

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

});

},1000);

}

//当组件被卸载时调用：

componentWillUnmount(){

//同时清除setInterval函数：

//如果this.iv有值时执行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这个组件后会自动执行componentDidMount中的内容:

ReactDOM.render(<ZuJian />,

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

5、下拉框默认选中

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--<select >

</select>-->

//1、下拉框默认选中

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:'长沙'},{id:2,name:'湘潭'},{id:3,name:'株洲'}];

//补全代码:设置湘潭为默认选中

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>

</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'}]}

//补全代码

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>

视频学习记录

props是object普通对象的类型。

super（）调用父类的构造方法，this.state就是状态机。

计算器代码执行顺序

面试题等等常考查内容：箭头函数内部的this和外部函数的this指向同一个对象

ReactJS componentWillUnmount()用法及代码示例

生命周期函数也叫钩子函数

props属性处理数组.html

<!DOCTYPE html>

<html>

<head>

//自定义的选项组件

class Item extends React.Component{

render(){

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

}

//自定义的下拉框组件

class Sel extends React.Component{

render(){

const arr = ['长沙','株洲','湘潭'];

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>

扩展操作符.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>

通过计数器学习state.html

<!DOCTYPE html>

<html>

<head>

class Counter extends React.Component{

//组件的构造方法

constructor(){

//调用父类的构造方法

super();

//添加一个状态

this.state = {

num: 0

};

}

//生命周期函数（钩子函数）

//当组件挂载以后调用这个函数

componentDidMount(){

//console.log(this);//当前组件

// let that = this;

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

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

// //必须调用setState方法才能使组件刷新

// that.setState({

// num: ++ that.state.num

// });

// },1000);

//箭头函数内部的this和外部函数的this指向同一个对象

this.iv = setInterval(() => {

this.setState({

num: ++ this.state.num

});

},1000);

}

//当组件被卸载时调用

componentWillUnmount(){

//同时清除setInterval函数

if(this.iv) {

clearInterval(this.iv);

}

render(){

return (<div>

<h1>计数器组件</h1>

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

</div>);

}

ReactDOM.render(<Counter />,

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

组件的props属性.html

<!DOCTYPE html>

<html>

<head>

//给自定义的标签中添加自定义的属性

//方法一：

// 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>

组件属性的默认值.html

<!DOCTYPE html>

<html>

<head>

class Address extends React.Component{

render(){

//this.props中的所有的属性是不能够修改的

//this.props.prov = '广东';//报错

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

}

//给Address组件的prov和city属性设置默认值

Address.defaultProps = {

prov: '江西',

city: '宜春'

};

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

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

标签：

含面试题：生命周期，钩子函数，prosp，state状态机，挂载卸载，父子组件【诗书画唱】

含面试题：生命周期，钩子函数，prosp，state状态机，挂载卸载，父子组件【诗书画唱】的评论 (共条)

你可能也喜欢这些文章

最新发布的文章

含面试题：生命周期，钩子函数，prosp，state状态机，挂载卸载，父子组件【诗书画唱】

本文作者的其他文章

含面试题：生命周期，钩子函数，prosp，state状态机，挂载卸载，父子组件【诗书画唱】的评论 (共 条)

你可能也喜欢这些文章

最新发布的文章

含面试题：生命周期，钩子函数，prosp，state状态机，挂载卸载，父子组件【诗书画唱】的评论 (共条)