React類組件是通過創(chuàng)建 class 繼承 React.Component創(chuàng)建的。類組件中通過render函數(shù)返回react元素。react組件的三大核心屬性是建立在react的類組件基礎(chǔ)上的，即：state、props、refs。
一、state
概念
state是組件對象最重要的屬性,值是對象(可以包含多個key:value的組合)，組件被稱為"狀態(tài)機",通過更新組件的state來更新對應(yīng)的頁面顯示(重新渲染組件)，有state稱為復雜組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>State</title>
<!-- 引入react核心庫 -->
<script src="https://cdn.bootcdn.NET/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<!-- 引入操作dom的擴展庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 引入babel來解析jsx語法 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="App"></div>
<script type="text/babel">
class Content extends React.Component {
//state:定義當前組件內(nèi)部的狀態(tài),狀態(tài)是當前組件私有的
state = {
content: "React真好用",
count: 0,
isHot: true,
};
render() {
const { content, isHot, count } = this.state;
return (
<div>
<h1>State</h1>
<p>{content}</p>
<p>{count}</p>
<p>{isHot ? "熱啊" : "冷啊"}</p>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<Content />);
</script>
</body>
</html>
執(zhí)行結(jié)果如下：
如何修改state的值
- 不可以直接通過this.state.xxx=xxx的方式修改state對象的內(nèi)容。
- 修改state一定要調(diào)用setState這個方法去修改。
- 使用語法：setState({key:value})。
- setState做了兩件事：1. 改變state 2. 重新調(diào)用了一次render。
<div id="app"></div>
<script type="text/babel">
class Demo extends React.Component {
state = {
isHot: true,
};
render() {
const { isHot } = this.state;
return (
<div>
<p>今天天氣很{isHot ? "很熱" : "涼快"}</p>
<button onClick={this.changeWea}>修改天氣</button>
</div>
);
}
/*
state不能直接修改，需要使用組件實例的setState方法
setState接受的參數(shù)是一個對象，將來會合并給原有的state中
*/
changeWea = () => {
const { isHot } = this.state;
// this.state.isHot = false; XXX
this.setState({ isHot: !isHot });
};
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<Demo />);
</script>
執(zhí)行結(jié)果如下：
二、props
概念
- props就是組件定義屬性的集合,它是組件對外的接口,由外部通過JSX屬性傳入設(shè)置(也就是從外部傳遞給內(nèi)部組件的數(shù)據(jù))。
- 每個組件對象都會有props(properties的簡寫)屬性。
- 組件標簽的所有屬性都保存在props中。
作用
1.通過標簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)，外部世界(組件)就是通過prop來和組件進行對話數(shù)據(jù)傳遞的。
2.組件內(nèi)部不要修改props數(shù)據(jù)，props是只讀的。
<script type='text/babel'>
class Myself extends React.Component{
render(){
console.log(this.props);
let {name,age,sex} = this.props.mes
//如果真的要修改props 則可以解構(gòu)出來某個屬性 然后對變量進行修改
name+="~"
return (
<ul>
<li>姓名是{name}</li>
<li>性別是{sex}</li>
<li>年齡是{age}</li>
</ul>
}
}
class App extends React.Component{
state = {
persons:[
{name:"laowang",age:19,sex:"man"},
{name:"laoli",age:29,sex:"man"},
{name:"laowan",age:12,sex:"woman"},
]
}
render(){
console.log(this);
const {persons} = this.state;
return (
<div>
{
persons.map((item,index)=>{
return <Myself mes={item} key={index}/>
})
}
</div>
}
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);
</script>
批量傳遞props
當需要把一個對象內(nèi)所有的key-value都傳遞到組件中，可以使用批量傳遞。比如一個對象obj，我們可以在傳遞props的時候直接書寫為{...obj}即可。當然，我們可以傳遞額外的props來添加和修改批量傳遞的內(nèi)容。
return (
<div>
{
persons.map((item,index)=>{
// return <Myself name={item.name} sex={item.sex} age={item.age} key={index}/>
//{...o}在jsx中書寫時，可以展開對象為key-value（jsx+react實現(xiàn)的 不是js語法）
return <Myself {...item} key={index}/>
})
}
</div>
執(zhí)行結(jié)果如下：
配置props限制
1.引入react的propType.js第三方包。
<!-- 對props中數(shù)據(jù)類型進行檢測及限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
2.prop-types的主要作用：對props中數(shù)據(jù)類型進行檢測及限制
3.propType的使用：
- 給組件擴展靜態(tài)屬性propTypes，值是一個對象。
- key就是被限制的props屬性。
- value值的寫法：可以限制值的數(shù)據(jù)類型（number、string、bool、func、object、array等）PropTypes.XXXX；限制特定的內(nèi)容：PropTypes.oneOf(['a', 'b']),值只能是a或者b；也可以在任何 PropTypes 屬性后面加上 isRequired 后綴，這樣如果這個屬性父組件沒有提供時，會打印警告信息。
<script type="text/babel">
class Myself extends React.Component {
render() {
console.log(this.props);
const { name, age, nicknames, address } = this.props;
return (
<div>
<h1>我是：{name}</h1>
<p>我今年：{age}歲</p>
<ul>
{nicknames.map((item, index) => {
return <li key={index}>{item}</li>;
})}
</ul>
<p>我家住在{address}</p>
</div>
);
}
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
nicknames: PropTypes.array,
address: PropTypes.oneOf(["湖北", "湖南"]),
};
}
class App extends React.Component {
render() {
return (
<div>
<Myself
name="李紅"
age={18}
nicknames={["小紅", "lucy", "普羅"]}
address="湖北"
/>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);
</script>
執(zhí)行結(jié)果如下：
三、refs
概念
Refs 提供了一種方式，允許我們訪問 DOM 節(jié)點或在 render 方法中創(chuàng)建的 React 元素。
ref的字符串方法
只需要在被獲取的DOM上設(shè)置ref屬性 值為一個自定義名稱XXX，在當前組件的其他位置可以通過this.refs.XXX獲取當前DOM。
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
<input type="text" ref="oIpt" />
<button onClick={this.showMsg}>點我彈出input中輸入的內(nèi)容</button>
</div>
);
}
showMsg = () => {
console.log(this.refs.oIpt.value);
};
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);
</script>
執(zhí)行結(jié)果如下：
回調(diào)函數(shù)形式的ref
1.ref屬性的值是一個函數(shù)（箭頭函數(shù)）。
2.當讀到ref屬性的時候，react會當內(nèi)部的函數(shù)調(diào)用，并傳遞當前的DOM為實參。
3.把這個接受實參的形參賦值給實例對象的一個屬性，這個屬性就是被獲取的DOM。
<script type="text/babel">
class App extends React.Component {
render() {
console.log(this);
return (
<div>
<input type="text" ref={(c) => (this.oIpt = c)} />
<button onClick={this.showMsg}>點我彈出input中輸入的內(nèi)容</button>
</div>
);
}
showMsg = () => {
console.log(this.oIpt.value);
};
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);
</script>
createRef的使用
1.首先使用React.createRef()方法創(chuàng)建一個容器。
2.把這個容器給到被獲取的DOM節(jié)點的ref屬性上。
3.通過this.容器.current獲取到當前的DOM。
<script type="text/babel">
class App extends React.Component {
//設(shè)置一個ref的容器
oIpt = React.createRef();
render() {
console.log(this);
return (
<div>
<input type="text" ref={this.oIpt} />
<button onClick={this.showMsg}>點我彈出input中輸入的內(nèi)容</button>
</div>
);
}
showMsg = () => {
alert(this.oIpt.current.value);
};
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);
</script>
總結(jié)
以上就是對react組件對象的三大核心屬性的一個簡單的演示。
簡單的理解state就是狀態(tài)，保存狀態(tài)數(shù)據(jù)的屬性，用來拿到狀態(tài)數(shù)據(jù)對界面進行渲染，因為state是響應(yīng)式的，所以向state中存放狀態(tài)數(shù)據(jù)時需要使用setState方法進行更改，react會重新調(diào)用render函數(shù)進行渲染。
而props就可以理解為標簽中的屬性，通過props就可以讀取組件外向組件內(nèi)傳遞的數(shù)據(jù)。
refs就是組件用來標識自己的一個標志，通過這個屬性就可以拿到標簽的信息，比如value，但注意，字符串形式的ref官方已經(jīng)不建議使用它，因為 string 類型的 refs 已過時并可能會在未來的版本被移除。
