前言
我已經(jīng)使用 React 多年，我確信我非常了解它，但最近我的老板對我說，“你根本不知道 React，你對它一無所知。”
我很生他的氣，但他指出了我程序中的三個(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 (
<div className="app">{ list.length && <List /> }</div>
)
}我老板：“你不知道&&”運(yùn)算符的特點(diǎn)嗎？當(dāng)請求還沒有成功返回時(shí)，會(huì)直接渲染“0”。
我不服氣，因?yàn)槲乙恢倍际沁@樣寫代碼，從來沒有犯過錯(cuò)誤。為了證明老大錯(cuò)了，我寫了下面的例子。
const List = ({ list = [] }) => {
return (
<div className="name-list-container">
{
list.map((name) => {
return <div className="name-list-item">{ name }</div>
})
}
</div>
)
}
const App = () => {
const [ list, setList ] = React.useState([ ])
// Simulation request data
setTimeout(() => {
setList([ 'fatfish', 'medium' ])
}, 3000)
return (
list.length && <List list={ list }/>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
我的天啊！老大說的對，一開始頁面顯示0，3秒后顯示列表。
為什么？
來自 MDN的提示：“當(dāng)且僅當(dāng)所有操作數(shù)都為真時(shí)，一組布爾操作數(shù)的邏輯與 (&&) 運(yùn)算符（邏輯合取）才為真。否則就是假的。”
更一般地，運(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 && <List list={ list } />
0 && <List list={ list } /> // 0如何解決？
我找到了三種方法來解決這個(gè)問題。我希望你不要犯和我一樣的錯(cuò)誤，祝福你。
// 1. Convert list.length to boolean
!!list.length && <List list={ list }/>
// 2. Use ternary expressions and null
list.length ? <List list={ list }/> : null
// 3. Controlled by specific logic
list.length >= 1 && <List list={ list }/>
2.“props.children”的奇怪行為
我猜你寫過類似的代碼。當(dāng)向 <Container /> 組件傳遞內(nèi)容時(shí)，會(huì)顯示“children”。如果沒有，將顯示一個(gè)空的工具提示。像下面這樣：
const Container = ({ children }) => {
if (children) {
return (
<div className="children-container">
<p>The content of children is:</p>
{ children }
</div>
)
} else {
return (
<div className="empty">empty</div>
)
}
}我的老板：“你要小心使用‘children’屬性，它會(huì)導(dǎo)致邏輯異常！就像在以下情況中一樣。”
1）.清空列表數(shù)據(jù)
你認(rèn)為這個(gè)例子會(huì)顯示什么——“空”？
不幸的是，答案是另一個(gè)。你是不是也覺得不可思議？朋友們，我們一定要非常小心地使用 props.children。否則，老板可能會(huì)扣你的工資。
const Container = ({ children }) => {
if (children) {
return (
<div className="children-container">
<p>The content of children is:</p>
{ children }
</div>
)
} else {
return (
<div className="empty">empty</div>
)
}
}
const App = () => {
const [ list, setList ] = React.useState([])
return (
<Container>
{
list.map((name) => {
return <div className="name-item">{ name }</div>
})
}
</Container>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
為什么？
讓我們向“Container”組件添加一行代碼，并嘗試打印children是什么！
const Container = ({ children }) => {
console.log(children, 'children')
// ...
}
是的，你是對的。此時(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 (
<div className="children-container">
<p>The content of children is:</p>
{ children }
</div>
)
} else {
return (
<div className="empty">empty</div>
)
}
}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 (
<div>
{ this.props.name }
</div>
)
}
}
const App = () => {
const [ name, setName ] = React.useState('fatfish')
const onClick = () => {
setName(name === 'fatfish' ? 'medium' : 'fatfish')
}
return (
<div className="app">
{
name === 'fatfish' ?
<Demo name={ name } /> :
<Demo name={ name } />
}
<button onClick={ onClick }>click</button>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
我錄制了一個(gè)簡短的 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í)行。
我們試試看：
//...
// Pay attention here
name === 'fatfish' ? <Demo key="1" name={ name } /> : <Demo key="2" name={ name } />
//...
你也可以通過 CodePen 試試，https://codepen.io/qianlong/pen/NWywodV。
