React綁定事件，flag等解決setInterval重復(fù)調(diào)用ref漸變，隨機(jī)點(diǎn)名，換色【詩(shī)書(shū)畫(huà)唱】
目錄：
講義
看教程視頻后記錄的個(gè)人理解等等
例子
props.children屬性.html
props和state組合使用：默認(rèn)選中的單選框.html
ref的使用方法：綁定點(diǎn)擊事件添加文本.html
布爾型的使用：隱藏或顯示登錄等的組件.html
組件的屬性.html
1、使用reactjs實(shí)現(xiàn)div的背景顏色漸變效果rgb(255,255,255).html
2、完整實(shí)現(xiàn)隨機(jī)點(diǎn)名器功能，添加繼續(xù)和停止按鈕功能。.html
1、使用reactjs實(shí)現(xiàn)div的背景顏色漸變效果rgb(255,255,255)
2、完整實(shí)現(xiàn)隨機(jī)點(diǎn)名器功能，添加繼續(xù)和停止按鈕功能。
用flag解決setInterval重復(fù)調(diào)用的問(wèn)題
隨機(jī)點(diǎn)名.html
用在調(diào)用?setInterval前寫(xiě)出if(this.iv) {clearInterval(this.iv);}的方法來(lái)解決?setInterval方法重復(fù)調(diào)用后停不下來(lái)的問(wèn)題
自動(dòng)切換背景顏色.html
注釋的位置可能影響代碼的運(yùn)行，如果注釋的位置不正確就會(huì)報(bào)錯(cuò)等等。
個(gè)人理解：同時(shí)componentDidMount中的內(nèi)容會(huì)在打開(kāi)網(wǎng)頁(yè)的時(shí)候執(zhí)行，componentWillUnmount中的內(nèi)容會(huì)在關(guān)閉網(wǎng)頁(yè)的時(shí)候執(zhí)行，我下面聲明的componentWillUnmount中的if(this.iv) {clearInterval(this.iv);}內(nèi)容可以網(wǎng)頁(yè)關(guān)閉時(shí)，關(guān)閉setInterval，防止setInterval沒(méi)關(guān)閉，占內(nèi)存等等。
個(gè)人想法：我認(rèn)為“漸變效果”是很好的設(shè)計(jì)效果，以后我可能常用。
講義
一、自定義組件的三種方法
二、設(shè)置組件屬性的默認(rèn)值
三、單選框和多選框的默認(rèn)選中設(shè)置
四、下拉框
五、...擴(kuò)展運(yùn)算符
Reactjs的組件：將一系列的Html或者組件封裝成一個(gè)自定義的標(biāo)簽
<ul><li>語(yǔ)文</li><li>數(shù)學(xué)</li><li>英語(yǔ)</li></ul>
<MyLabel abc="[語(yǔ)文，數(shù)學(xué)，英語(yǔ)]"/>
看教程視頻后記錄的個(gè)人理解等等
雙倍子標(biāo)簽（自己定義的子組件）——>
這樣才沒(méi)有寫(xiě)死——>
setState用來(lái)刷新組件——>
個(gè)人理解：children屬性就是被去標(biāo)簽夾住的內(nèi)容——>
this.props.children就是一個(gè)數(shù)組——>
HTML的很多常用的內(nèi)容都可以寫(xiě)成子組件，要用的時(shí)候調(diào)用組件就可以了（調(diào)用組件的時(shí)候就像是在調(diào)用自定義的HTML標(biāo)簽），比如登錄，注冊(cè)可以寫(xiě)成登錄，注冊(cè)組件后調(diào)用，個(gè)人認(rèn)為這個(gè)“組件化”就是封裝后調(diào)用，減少重復(fù)代碼——>
類似于id=XXX的ref=XXX，類似于document.getElementById（XXX）的this.refs.XXX的例子說(shuō)明——>
例子
props.children屬性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
/*例子1 START：先定義了一個(gè)MyTag組件 （有時(shí)可以理解為"標(biāo)簽" ，
?{this.props.children}是用來(lái)顯示在 ReactDOM.render中的<MyTag></MyTag>標(biāo)簽之間的內(nèi)容，
?即children屬性可以理解為標(biāo)簽內(nèi)部的html內(nèi)容——>*/
class MyTag extends React.Component{
render(){
return (<strong>
? ? ? ? {this.props.children},{this.props.name}
? ? </strong>);
}?
}
ReactDOM.render(<MyTag name="張三">你好</MyTag>,
document.getElementById('app1'));
//例子1 END
/*例子2 START ——> 個(gè)人理解：this.props.children是一個(gè)由元素組成的數(shù)組
?,這里的this.props.children[1]就是"科目表 "這個(gè)文本，
?this.props.children[1]表示父標(biāo)簽（標(biāo)簽和文本等等有時(shí)可以理解為元素）下
?的<ul>和其下面的所有子標(biāo)簽<li>的內(nèi)容。? ——>",
*/
class Content extends React.Component {
render(){
return (<h1>
? ? ? ? {this.props.children[0]}
? ? ? ? <div>{this.props.children[1]}</div>
? ? ? ? </h1>);
}
}
class Subject extends React.Component{
render(){
return (<ul>{this.props.children}</ul>);
}
}
? ? ? ? ? ? ReactDOM.render(<Content>科目表??
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul><li>語(yǔ)文</li><li>數(shù)學(xué)</li><li>英語(yǔ)</li></ul>
? ? ? ? ? ? ? ? ? ? ? ? </Content>,document.getElementById('app2'));
//例子2 END
/*例子3 START：組合使用2個(gè)組件的this.props.children來(lái)顯示"語(yǔ)文"的文字為斜體，
?數(shù)學(xué)為粗體：*/
class Tag1 extends React.Component{
render(){
return (<li><em>{this.props.children}</em></li>);
}
}
class Tag2 extends React.Component{
render(){
return (<li><strong>{this.props.children}</strong></li>);
}
}
?ReactDOM.render(<Subject><Tag1>語(yǔ)文</Tag1><Tag2>數(shù)學(xué)</Tag2></Subject>,document.getElementById('app3'));
//例子3 END
</script>
</head>
<body>
例子1：
<div id="app1"></div>
例子2：
<div id="app2"></div>
例子3：
<div id="app3"></div>
</body>
</html>
props和state組合使用：默認(rèn)選中的單選框.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//1.先聲明Name子組件：
class Name extends React.Component{
render(){
return <div><input type="text" value={this.props.name} /></div>;
}
}
//2.聲明Age子組件：
class Age extends React.Component{
render(){
return <div><label>年齡是:{this.props.age}</label></div>;
}
}
//3.聲明sex子組件：
class sex extends React.Component{
render(){
return (<div>
? ? ? ? <input type="radio" value="男"?
? ? ? ? ? ? checked={this.props.sex === '男' ? true : false} />男
? ? ? ? <input type="radio" value="女"?
? ? ? ? ? ? checked={this.props.sex === '女' ? true : false} />女
? ? ? ? </div>);
}
}
/*4.聲明在return時(shí)用了Name，Age，sex這3個(gè)子組件的Stu父組件。
?Stu父組件包括：含super和this.state的constructor構(gòu)造方法，
可以return多個(gè)子組件內(nèi)容的render()方法。
?
重要內(nèi)容：刷新組件中的內(nèi)容只能使用setState才能實(shí)現(xiàn)。
? */
class Stu extends React.Component{
constructor(){
super();
this.state = {
sname: 'Kite',
sage: 21,
ssex: '女'
}
}
render(){
return (<div>
? ? ? ? <Name name={this.props.sname} />
? ? ? ? <Age age={this.props.sage} />
? ? ? ? <sex sex={this.props.ssex} />
? ? ? ? </div>);
}
}
ReactDOM.render(<Stu sname="詩(shī)書(shū)畫(huà)唱" sage="19" ssex='男' />,document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
ref的使用方法：綁定點(diǎn)擊事件添加文本.html
布爾型的使用：隱藏或顯示登錄等的組件.html
組件的屬性.html
1、使用reactjs實(shí)現(xiàn)div的背景顏色漸變效果rgb(255,255,255)
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="UTF-8" />
? ? <title></title>
?
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
? </head>
? <style>
?
? #id2 {
??
?background-image: linear-gradient(to right, RGB(255,255,255) , RGB(0,255,255))
}
?
? </style>
? <body>
? ? <div id="example"? ></div>
? ? <script type="text/babel">
? ? ? var myStyle = {
? ? ? ??
? ? ? ? backgroundColor:'red',
? ? ? ?
? ? ? ? fontSize:40,
height:100,width:500,
? ? ? };
? ? ??
? ? ??
? ? ? class ZuJianName extends React.Component{
render(){
return <div style = {myStyle} id="id2" >漸變效果</div>;
}
}
? ? ? ReactDOM.render(<ZuJianName? />,
? ? ? document.getElementById('example')
? ? ? );
? ? </script>
? </body>
</html>
2、完整實(shí)現(xiàn)隨機(jī)點(diǎn)名器功能，添加繼續(xù)和停止按鈕功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
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: ["詩(shī)書(shū)畫(huà)唱","三連","點(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
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? },7);
}
//當(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><input type="button" value="停止"?
onClick={this.Click1.bind(this)} />
<input type="button" value="繼續(xù)"?
onClick={this.Click2.bind(this)} />
? ? ? ? <h1>顯示的名字:</h1>
? ? ? ? <h2> {this.state.arr[this.state.num]}</h2>
? ? ? ? </div>);
}
Click1(){
clearInterval(this.iv);
}
Click2(){
/*解決setInterval停不下來(lái)的問(wèn)題 START：
每次多調(diào)用的this.iv就先清除掉后再調(diào)用就
不會(huì)出現(xiàn)多次調(diào)用this.iv后停不下來(lái)的問(wèn)題*/
if( this.iv!=null){//判斷計(jì)時(shí)器是否為空
clearInterval(this.iv);
this.iv=null;
}
// 解決setInterval停不下來(lái)的問(wèn)題 END
?this.iv = setInterval(() => {
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? this.setState({
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },7);
? ? ? ? ? ? ? ? ? ??
??
}
}
//通過(guò)ReactDOM.render的<ZuJian />來(lái)掛載ZuJian這個(gè)組件后會(huì)自動(dòng)執(zhí)行componentDidMount中的內(nèi)容:
ReactDOM.render(<ZuJian />,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
用flag解決setInterval重復(fù)調(diào)用的問(wèn)題
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var nameArr=['詩(shī)書(shū)畫(huà)唱虎','詩(shī)書(shū)畫(huà)唱蛇','詩(shī)書(shū)畫(huà)唱兔','詩(shī)書(shū)畫(huà)唱猴','詩(shī)書(shū)畫(huà)唱牛','詩(shī)書(shū)畫(huà)唱鼠','詩(shī)書(shū)畫(huà)唱馬','詩(shī)書(shū)畫(huà)唱車'];
var iv=null;
var flag=true;
function doStart(){
nameArr.sort(
function(){
return 0.5-Math.random();
}
);
var i=0;
if(flag){
iv=setInterval(
function(){
document.getElementById("nameDiv").innerHTML=nameArr[i];
i++;
if(i>=nameArr.length){
i=0;
}
}
,10);
flag=false;
}
}
function doStop(){
clearInterval(iv)
flag=true;
}
</script>
</head>
<body>
<table? width="100%">
<tr>
<td align="center">
<input type="button" value="開(kāi)始" onclick="doStart();"/>
<input type="button" value="就是你" onclick="doStop();"/>
</td>
</tr>
<tr>
<td align="center">
<div id="nameDiv" style="font-size:80px;">姓名</div>
</td>
</tr>
</table>
</body>
</html>
用在調(diào)用?setInterval前寫(xiě)出if(this.iv) {clearInterval(this.iv);}的方法來(lái)解決?setInterval方法重復(fù)調(diào)用后停不下來(lái)的問(wèn)題
自動(dòng)切換背景顏色.html
注釋的位置可能影響代碼的運(yùn)行，如果注釋的位置不正確就會(huì)報(bào)錯(cuò)等等。
個(gè)人理解：同時(shí)componentDidMount中的內(nèi)容會(huì)在打開(kāi)網(wǎng)頁(yè)的時(shí)候執(zhí)行，componentWillUnmount中的內(nèi)容會(huì)在關(guān)閉網(wǎng)頁(yè)的時(shí)候執(zhí)行，我下面聲明的componentWillUnmount中的if(this.iv) {clearInterval(this.iv);}內(nèi)容可以網(wǎng)頁(yè)關(guān)閉時(shí)關(guān)閉setInterval，防止setInterval沒(méi)關(guān)閉，占內(nèi)存等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
class ZuJian extends React.Component{
constructor(){
super();
this.state = {
num:0,
arr: ["blue","yellow","red","black","green"]
};
}
componentDidMount(){
? ? ? ? ? ? ? ? ? ? this.iv = setInterval(() => {
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? this.setState({
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? },7);
}
componentWillUnmount(){
if(this.iv) {
clearInterval(this.iv);
}
}
??
? ?
/*這里的style={myStyle}，其實(shí)用了{(lán)}就是解構(gòu)的過(guò)程而style={ {
?backgroundColor: this.state.arr[this.state.num]}
}也是解構(gòu)以{}聲明*//*里面的blue等等也可以寫(xiě)成rgb的格式，比如rgb(25,25,25)*/
render(){
var myStyle = {
?backgroundColor: this.state.arr[this.state.num],
height:100,
width:500
?};
return (<div><input type="button" value="停止"?
onClick={this.Click1.bind(this)} />
<input type="button" value="繼續(xù)"?
onClick={this.Click2.bind(this)} />
? ? ? ? <h1>自動(dòng)切換的顏色:</h1>
?<div? style={myStyle}></div>
? ? ? ??
? ? ? ?
? ? ? ? </div>);
}
Click1(){
clearInterval(this.iv);
}
Click2(){
if( this.iv!=null){
clearInterval(this.iv);
this.iv=null;
}
?this.iv = setInterval(() => {
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? this.setState({
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },7);
? ? ? ? ? ? ? ? ? ??
??
}
}
ReactDOM.render(<ZuJian />,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
