成人本科有學(xué)位證嗎關(guān)鍵詞優(yōu)化需要從哪些方面開展
一、props 了解
理解
1、每個組件對象都會有 props（properties的簡寫）屬性
2、組件標(biāo)簽的所有屬性都保存在 props 中
作用
通過標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)
注意
組件內(nèi)部不要修改 props 數(shù)據(jù)
二、案例
需求：自定義用來顯示一個人員信息的組件
姓名必須指定，且為字符串類型；
性別為字符串類型，如果性別沒有指定，默認(rèn)為男
年齡為字符串類型，默認(rèn)為18
1、基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>props基本使用</title>
</head>
<body><!-- 準(zhǔn)備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// 1、創(chuàng)建組件class Person extends React.Component {// state是在組件內(nèi)部定義數(shù)據(jù)，通過 this.state.xxx 訪問// state = { name: 'jerry', sex: '男', age: '19' }render() {console.log(this) // Person組件的實例對象// 通過Person組件實例的props屬性接收外部傳入數(shù)據(jù)const { name, sex, age } = this.propsreturn (<ul><li>姓名：{ name }</li><li>性別：{ sex }</li><li>年齡：{ age }</li></ul>)}}// 2、渲染組件到頁面ReactDOM.render(<Person name="jerry" sex="男" age={19}/>, document.getElementById('test1'))ReactDOM.render(<Person name="tom" sex="女" age={18}/>, document.getElementById('test2'))// 模擬api返回數(shù)據(jù)處理（批量傳遞屬性）const p = { name: '老劉', sex: '女', age: 18 }// ReactDOM.render(<Person name={p.name} sex={p.sex} age={p.age}/>, document.getElementById('test3'))// 簡寫 （返回數(shù)據(jù)p中的數(shù)據(jù)項(name、sex、age...)必須存在，否則取不到值）ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))/* ... 展開運算符 */// <Person {...p}/> 中的 {} 代表要在此處寫js表達(dá)式，并不是字面量對象// ... 不能遍歷對象，babel+react 允許使用 ... 遍歷對象，僅適用于標(biāo)簽屬性傳遞console.log('展開運算符', ...p)</script>
</body>
</html>
2、對 props 進行限制
React 中使用 propTypes 對標(biāo)簽屬性進行類型、必要性的限制
React.PropTypes 形式 React v15.5 開始已棄用
React v15.5 及以后版本以后引入 prop-types 庫，對組件標(biāo)簽屬性進行限制
React 中使用 defaultProps 指定默認(rèn)標(biāo)簽屬性值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對props進行限制</title>
</head>
<body><!-- 準(zhǔn)備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標(biāo)簽屬性進行限制，全局有PropTypes對象 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {render () {const { name, sex, age } = this.props// this.props.speak() // 執(zhí)行傳入方法// props是只讀的// this.props.name = 'jack' // 此行代碼會報錯，因為props是只讀的return (<ul><li>姓名：{ name }</li><li>性別：{ sex }</li><li>年齡：{ age + 1 }</li></ul>)}}// 偽代碼Person.屬性規(guī)則 = {name: '必傳，字符串',sex: '非必傳，字符串，默認(rèn)男',age: '非必傳，數(shù)字，默認(rèn)18'}// React 中使用 propTypes 對標(biāo)簽屬性進行類型、必要性的限制Person.propTypes = {// name: React.PropTypes.string.isRequired, // React v15.5 開始已棄用name: PropTypes.string.isRequired, // 限制name必傳，且為字符串sex: PropTypes.string, // 限制sex為字符串age: PropTypes.number, // 限制age為數(shù)字speak: PropTypes.func // 限制speak為函數(shù)（function會和關(guān)鍵字沖突，改為使用func）}// React 中使用 defaultProps 指定默認(rèn)標(biāo)簽屬性值Person.defaultProps = {sex: '男', // sex默認(rèn)值為男age: 18 // age默認(rèn)值為18}ReactDOM.render(<Person name="jerry" speak={speak}/>, document.getElementById('test1'))ReactDOM.render(<Person name="tom" sex="女" age={18} speak={speak}/>, document.getElementById('test2'))// 給實例傳入方法，限制傳入方法必須為函數(shù)function speak() {console.log('我說話了')}</script>
</body>
</html>
3、props 的簡寫方式
使用 static 關(guān)鍵字，給類自身添加屬性；將 propTypes、defaultProps 寫在類中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對props進行限制</title>
</head>
<body><!-- 準(zhǔn)備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標(biāo)簽屬性進行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {constructor(props) {// 構(gòu)造器是否接收props，是否傳遞給super，取決于：是否希望在構(gòu)造器中通過this訪問props// console.log(props)super(props)console.log('constructor', this.props)}/* 簡化寫法：使用static關(guān)鍵字，給類自身添加屬性 */// 對標(biāo)簽屬性進行類型、必要性的限制static propTypes = {name: PropTypes.string.isRequired, // 限制name必傳，且為字符串sex: PropTypes.string, // 限制sex為字符串age: PropTypes.number, // 限制age為數(shù)字}// 指定標(biāo)簽?zāi)J(rèn)屬性值static defaultProps = {sex: '男', // sex默認(rèn)值為男age: 18 // age默認(rèn)值為18}render() {const { name, sex, age } = this.propsreturn (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age + 1}</li></ul>)}}ReactDOM.render(<Person name="jerry" />, document.getElementById('test'))</script>
</body>
</html>
4、函數(shù)組件使用 props
函數(shù)式組件，可以通過接收參數(shù)形式使用 props；props 會收集所有傳遞的標(biāo)簽屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對props進行限制</title>
</head>
<body><!-- 準(zhǔn)備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標(biāo)簽屬性進行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">function Person(props) {const { name, age, sex } = propsreturn (<ul><li>姓名：{ name }</li><li>性別：{ sex }</li><li>年齡：{ age }</li></ul>)}// React 中使用 propTypes 對標(biāo)簽屬性進行類型、必要性的限制Person.propTypes = {name: PropTypes.string.isRequired, // 限制name必傳，且為字符串sex: PropTypes.string, // 限制sex為字符串age: PropTypes.number, // 限制age為數(shù)字}// React 中使用 defaultProps 指定標(biāo)簽?zāi)J(rèn)屬性值Person.defaultProps = {sex: '男', // sex默認(rèn)值為男age: 18 // age默認(rèn)值為18}ReactDOM.render(<Person name="jerry" />, document.getElementById('test'))</script>
</body>
</html>
三、展開運算符了解
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Document</title>
</head><body><script type="text/javascript">let arr1 = [1, 3, 5, 7, 9]/* 1、展開一個數(shù)組 */console.log(...arr1) // 1 3 5 7 9/* 2、連接數(shù)組 */let arr2 = [2, 4, 6, 8, 10]let arr3 = [...arr1, ...arr2]console.log(arr3) // [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]/* 3、不定參數(shù)（在函數(shù)中使用） */function sum(...numbers) {return numbers.reduce((preValue, currentValue) => {return preValue + currentValue})}console.log(sum(1, 2, 3, 4)) // 10/* 4、構(gòu)造字面量對象時使用展開語法 */let person = { name: 'tom', age: 18 }// 4.1、深拷貝一層let person2 = { ...person } person.name = 'jerry'console.log(person) // {name: 'jerry', age: 18}console.log(person2) // {name: 'tom', age: 18}// console.log(...person) // 報錯，展開運算符不能展開對象// 4.2、合并let person3 = { ...person, name: 'jack', address: '地球' }console.log(person3) // {name: 'jack', age: 18, address: '地球'}</script>
</body>
</html>