建站
咨詢
售后
建站咨詢
新聞中心
前言
我已經(jīng)使用 React 多年，我確信我非常了解它，但最近我的老板對(duì)我說，“你根本不知道 React，你對(duì)它一無所知?！?/p>
按需搭建網(wǎng)站可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義
我很生他的氣，但他指出了我程序中的三個(gè)漏洞。我現(xiàn)在把它記錄下來，也分享給還不知道的小伙伴。
1、你知道“&&”的用法嗎？
在React程序中，我經(jīng)常使用“&&”運(yùn)算符來決定是否顯示內(nèi)容，具體方式如下：
const App = () => {
const [ list, setList ] = useState([])
// Simulation request data
setTimeout(() => {
setList([ 'fatfish', 'medium' ])
}, 2000)
return (
{ list.length &&
}
)
}我老板：“你不知道&&”運(yùn)算符的特點(diǎn)嗎？當(dāng)請(qǐng)求還沒有成功返回時(shí)，會(huì)直接渲染“0”。
我不服氣，因?yàn)槲乙恢倍际沁@樣寫代碼，從來沒有犯過錯(cuò)誤。為了證明老大錯(cuò)了，我寫了下面的例子。
const List = ({ list = [] }) => {
return (
{
list.map((name) => {
return{ name }
})
}
)
}
const App = () => {
const [ list, setList ] = React.useState([ ])
// Simulation request data
setTimeout(() => {
setList([ 'fatfish', 'medium' ])
}, 3000)
return (
list.length &&
)
}
ReactDOM.render(, document.getElementById('app'))
我的天啊！老大說的對(duì)，一開始頁面顯示0，3秒后顯示列表。
為什么？
來自 MDN的提示：“當(dāng)且僅當(dāng)所有操作數(shù)都為真時(shí)，一組布爾操作數(shù)的邏輯與 (&&) 運(yùn)算符（邏輯合?。┎艦檎?。否則就是假的?！?/p>
更一般地，運(yùn)算符返回從左到右計(jì)算時(shí)遇到的第一個(gè)假操作數(shù)的值，或者如果它們都是真值，則返回最后一個(gè)操作數(shù)的值。
例子如下：
const x1 = 0
const x2 = 'fatfish'
const x3 = 1
const x4 = 'medium'
console.log(x1 && x2) // 0
console.log(x3 && x4) // medium
現(xiàn)在我終于明白為什么寫這樣的代碼會(huì)導(dǎo)致錯(cuò)誤。原因如下：
list.length &&
0 &&// 0
如何解決？
我找到了三種方法來解決這個(gè)問題。我希望你不要犯和我一樣的錯(cuò)誤，祝福你。
// 1. Convert list.length to boolean
!!list.length &&
// 2. Use ternary expressions and null
list.length ?: null
// 3. Controlled by specific logic
list.length >= 1 &&
2.“props.children”的奇怪行為
我猜你寫過類似的代碼。當(dāng)向
const Container = ({ children }) => {
if (children) {
return (
The content of children is:
{ children }
)
} else {
return (
empty
)
}
}我的老板：“你要小心使用‘children’屬性，它會(huì)導(dǎo)致邏輯異常！就像在以下情況中一樣?！?/p>
1）.清空列表數(shù)據(jù)
你認(rèn)為這個(gè)例子會(huì)顯示什么——“空”？
不幸的是，答案是另一個(gè)。你是不是也覺得不可思議？朋友們，我們一定要非常小心地使用 props.children。否則，老板可能會(huì)扣你的工資。
const Container = ({ children }) => {
if (children) {
return (
The content of children is:
{ children }
)
} else {
return (
empty
)
}
}
const App = () => {
const [ list, setList ] = React.useState([])
return (
{
list.map((name) => {
return{ name }
})
}
)
}
ReactDOM.render(, document.getElementById('app'))
為什么？
讓我們向“Container”組件添加一行代碼，并嘗試打印children是什么！
const Container = ({ children }) => {
console.log(children, 'children')
// ...
}
是的，你是對(duì)的。此時(shí)“children”為空數(shù)組，所以顯示“children的內(nèi)容為：”而不是“empty”。
如何解決？
使用 React.Children.toArray 解決這個(gè)問題會(huì)很容易，然后你會(huì)看到顯示“empty”。所以如果你真的需要用children作為條件判斷，我建議你使用這個(gè)方法！
const Container = ({ children }) => {
// if (children) {
// Pay attention here
if (React.Children.toArray(children).length) {
return (
The content of children is:
{ children }
)
} else {
return (
empty
)
}
}3.關(guān)于掛載和更新的問題
在 React 中通過狀態(tài)來切換組件是很常見的，但是，這個(gè)小東西也會(huì)讓你感到困惑。
在下面的代碼中，你認(rèn)為當(dāng)你切換name的值時(shí)，一個(gè)Demo組件會(huì)被卸載，另一個(gè)會(huì)被掛載嗎？
class Demo extends React.Component {
componentDidMount() {
console.log('componentDidMount', this.props.name);
}
componentDidUpdate() {
console.log('componentDidUpdate', this.props.name);
}
render () {
return (
{ this.props.name }
)
}
}
const App = () => {
const [ name, setName ] = React.useState('fatfish')
const onClick = () => {
setName(name === 'fatfish' ? 'medium' : 'fatfish')
}
return (
{
name === 'fatfish' ?
:
}
)
}
ReactDOM.render(, document.getElementById('app'))
我錄制了一個(gè)簡(jiǎn)短的 gif 給你真相。
你也可以通過 CodePen 試試，https://codepen.io/qianlong/pen/NWywodV
為什么？
雖然，我們寫了兩個(gè) Demo 組件，假設(shè)它們會(huì)分別掛載和更新，但 React 認(rèn)為它們是同一個(gè)組件，所以 componentDidMount 只會(huì)執(zhí)行一次。
如何解決？
但是當(dāng)我們要寫兩個(gè)相同的組件但是傳遞不同的參數(shù)時(shí)，我們應(yīng)該怎么辦呢？
是的，你應(yīng)該為這兩個(gè)組件添加不同的鍵，這樣 React 就會(huì)認(rèn)為它們是不同的組件。componentDidMount 也會(huì)單獨(dú)執(zhí)行。
我們?cè)囋嚳矗?/p>
//...
// Pay attention here
name === 'fatfish' ?:
//...
你也可以通過 CodePen 試試，https://codepen.io/qianlong/pen/NWywodV。
文章標(biāo)題：我老板：你根本不懂 React！
URL標(biāo)題：http://www.5511xx.com/article/dpcgpsg.html
