写react也有一段时间了，之前是vue，去年转成react，刚开始的确有点不习惯，经验了一些我的项目的锻炼，当初开始缓缓喜爱上了react。同时，也在一直的实际中，开始总结一些好的办法，当然是集体认为的一些好习惯，每个人都有每个人的认识，欢送交换。
优先应用function组件
如果能够的话，尽可能应用function组件，缩小应用class组件，加上当初hook的大风行，基本上大部分场景都能够应用function搞定，遗记class的生命周期，constructor吧。
比方以前都是这样写
而当初，你能够这样写
是不是十分简洁明了，写更少的代码，实现雷同的事件。
尽量为你的组件命名
这样能够减少代码可读性，也不便在debug的时候排查谬误。
// bad case
export default () => <div>...</div>
// good case
export default function User() {
return <div>...</div>
}正当组织公共办法
如果你的function组件须要用到一些比方解决数据、日期的办法，请将其放到function组件里面，一方面放弃function的简洁，一方面能够便于在别的中央重用这些办法。当然这些办法也能够对立放到utils外面去，决定权在你。
// bad case
function Calendar({ date }) {
function parseDate(date) {
...
}
return <div>Today is {parseDate(date)}</div>
}
// good case
function parseDate(date) {
...
}
function Calendar({ date }) {
return <div>Today is {parseDate(date)}</div>
}善用map、filters等办法
比方须要展现一个人的兴趣爱好列表，并进行相干操作等
// bad case
function Filters({ onFilterClick }) {
return (
<>
<ul>
<li>
<div onClick={() => onFilterClick('travel')}>游览</div>
</li>
<li>
<div onClick={() => onFilterClick('music')}>
听音乐
</div>
</li>
<li>
<div onClick={() => onFilterClick('movies')}>看电影</div>
</li>
</ul>
</>
)
}
// good case
const List = [
{
identifier: 'travel',
name: '游览',
},
{
identifier: 'music',
name: '听音乐',
},
{
identifier: 'movies',
name: '看电影',
}
]
function Filters({ onFilterClick }) {
return (
<>
<ul>
{List.map(item => (
<li>
<div onClick={() => onFilterClick(item.identifier)}>
{genre.name}
</div>
</li>
))}
</ul>
</>
)
}留神单个组件代码量
尽可能放弃单个组件代码行数管制在肯定范畴内，单个组件实现单个组件的工作，不要柔和在一起，写一个几千行的组件，当然这是个人见解，这个仁者见仁，最好不要太多，太多的话阐明拆分粒度不够，也不不便他人code review代码。
props的应用
- 在应用react的过程中少不了要传递props，如果能够间接在参数中进行解构，显得更不便。
// bad case
function Input(props) {
return <input value={props.value} onChange={props.onChange} />
}
// good case
function Input({value,onChange}) {
return <input value={value} onChange={onChange} />
}- 如果一个组件须要接管十分多的props参数，就须要思考是否能够对组件进行正当拆分，毕竟当组件接管太多参数的时候，其中一个change，整个组件都要从新渲染，开销较大。
- 多个参数向下传递的时候，能够思考传递对象，比方
// bad case
<User
name={user.name}
email={user.email}
age={user.age}
sex={user.sex}
phone={user.phone}
/>
// good case
<User user={user} />条件渲染
- 防止嵌套条件渲染
// bad case
isSubscribed ? (
<Comp1 />
) : isRegistered ? (
<Comp2 />
) : (
<Comp3 />
)
// good case
function Login({ subscribed, registered }) {
if (subscribed) {
return <Comp1 />
}
if (registered) {
return <Comp2 />
}
return <Comp3 />
}
function Component() {
return (
<Login
subscribed={subscribed}
registered={registered}
/>
)
}善用useReducer
在function中须要治理较多的state的时候，能够思考应用useReducer，相似redux进行对立治理。
// bad case
function Component() {
conse [name,setName]=useState('')
const [phone, setPhone] = useState('')
const [email, setEmail] = useState('')
const [error, setError] = useSatte(null)
return (
...
)
}
// good case
const initialState = {
name:'',
phone: '',
email: '',
error: null
}
const reducer = (state, action) => {
switch (action.type) {
...
default:
return state
}
}
function Component() {
const [state, dispatch] = useReducer(reducer, initialState)
return (
...
)
}临时先总结了这部分，当然一些常见的习惯没有写，在掘金许多大佬曾经总结过了，今后须要在一直的实际中总结晋升。
发表回复