資訊專欄INFORMATION COLUMN
摘要：哈哈，又是我，廢話不多說(shuō)，直接看代碼個(gè)人原則既然是組件化的，那么相同的代碼，我不會(huì)寫(xiě)第二遍不在結(jié)構(gòu)中夾雜太多邏輯遵守上一篇寫(xiě)一手漂亮的的規(guī)則可讀性在我心里永遠(yuǎn)大于性能追求極致性能場(chǎng)景除外對(duì)生命周期函數(shù)排序傳遞多個(gè)時(shí)注意換行利用對(duì)象展開(kāi)符傳遞
哈哈，又是我，廢話不多說(shuō)，直接看代碼
個(gè)人原則既然react是組件化的，那么相同的代碼，我不會(huì)寫(xiě)第二遍
不在dom結(jié)構(gòu)中夾雜太多js邏輯
遵守上一篇《寫(xiě)一手漂亮的js》的規(guī)則
"可讀性" 在我心里永遠(yuǎn)大于 "性能"（追求極致性能場(chǎng)景除外)
對(duì)生命周期函數(shù)排序// bad
class Demo extends React.Component {
render() {}
componentDidMount() {}
componentWillMount() {}
}
// good
class Demo extends React.Component {
componentWillMount() {}
componentDidMount() {}
render() {}
}
傳遞多個(gè)props時(shí)注意換行
// bad利用對(duì)象展開(kāi)符傳遞props{}} /> // goood {}} />
const someProps = {
a: 1,
b: 2,
c: 3
}
// bad
利用箭頭函數(shù)綁定this
// bad
class Demo extends React.Component {
handleClick() {
}
render() {
}
}
// good
class Demo extends React.Component {
handleClick = () => {
}
render() {
}
}
提前解構(gòu)state，props
// bad
class Demo extends React.Component {
handleClick = () => {
this.props.add(this.state.a + this.state.b)
this.props.respond()
}
}
// good
class Demo extends React.Component {
handleClick = () => {
const { a, b } = this.state
const { respond, add } = this.props
add(a + b)
respond()
}
}
map時(shí)不要使用index當(dāng)做key，用item的id
index沒(méi)辦法利用key來(lái)避免不必要的渲染
// bad
class Demo extends React.Component {
render() {
return arr.map((item, i) => (
{item.name}
))
}
}
// good
class Demo extends React.Component {
render() {
return arr.map(item => (
{item.name}
))
}
}
不要將大段的內(nèi)聯(lián)樣式寫(xiě)在組件上
影響閱讀
// bad
class Demo extends React.Component {
render() {
return (
11
)
}
}
// good
const styles = {
container: {
width: "100px",
height: "100px",
textAlign: "center",
lineHeight: "100px"
}
}
class Demo extends React.Component {
render() {
return (
11
)
}
}
給props加上類型檢查
一定程度上能及時(shí)發(fā)現(xiàn)問(wèn)題，當(dāng)然更好的選擇是flow、ts
// bad
class Demo extends React.Component {
// nothing
}
// good
import PropTypes from "prop-types";
class Demo extends React.Component {
static propTypes = {
className: PropTypes.string,
style: PropTypes.object,
url: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
]),
onClick: PropTypes.func,
}
}
盡量不要在渲染組件時(shí)傳遞匿名函數(shù)
首先它會(huì)影響閱讀
每次渲染會(huì)生成新的匿名函數(shù)，對(duì)子組件來(lái)說(shuō)就是新的props，就會(huì)觸發(fā)再一次更新
當(dāng)然，當(dāng)函數(shù)只有一行的時(shí)候，我覺(jué)得也是可以這么做的，從代碼簡(jiǎn)潔性考慮
// bad
class Demo extends React.Component {
render() {
return (
{
a++
this.props.add()
}}>11
)
}
}
// good
class Demo extends React.Component {
handleClick = () => {
a++
this.props.add()
}
render() {
return (
11
)
}
}
補(bǔ)充
大牛快來(lái)評(píng)論區(qū)批評(píng)、指正、補(bǔ)充
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92578.html
摘要：介紹看了很多，卻沒(méi)有人教我怎么去寫(xiě)一手漂亮的代碼，今天我來(lái)講講我自己寫(xiě)的經(jīng)驗(yàn)不要在代碼中留大段注釋掉的代碼留給去管理，不然你要干嘛適當(dāng)?shù)負(fù)Q行適當(dāng)?shù)奶砑幼⑨專灰偪竦奶砑幼⑨寣?duì)一段代碼或者一行特別需要注意的代碼注釋不要瘋狂的注釋，太啰嗦， 介紹 看了很多best practice，卻沒(méi)有人教我怎么去寫(xiě)一手漂亮的js代碼，今天我來(lái)講講我自己寫(xiě)js的經(jīng)驗(yàn) 不要在代碼中留大段注釋掉的代碼 ...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...
閱讀 1358·2021-09-24 10:26
閱讀 3671·2021-09-06 15:02
閱讀 626·2019-08-30 14:18
閱讀 584·2019-08-30 12:44
閱讀 3125·2019-08-30 10:48
閱讀 1949·2019-08-29 13:09
閱讀 2002·2019-08-29 11:30
閱讀 2288·2019-08-26 13:36
