写react也有一段时间了，之前是vue，去年转成react，刚开始的确有点不习惯，经验了一些我的项目的锻炼，当初开始缓缓喜爱上了react。同时，也在一直的实际中，开始总结一些好的办法，当然是集体认为的一些好习惯，每个人都有每个人的认识，欢送交换。
优先应用function组件
如果能够的话，尽可能应用function组件，缩小应用class组件，加上当初hook的大风行，基本上大部分场景都能够应用function搞定，遗记class的生命周期，constructor吧。
比方以前都是这样写
而当初，你能够这样写
是不是十分简洁明了，写更少的代码，实现雷同的事件。
尽量为你的组件命名
这样能够减少代码可读性，也不便在debug的时候排查谬误。
// bad caseexport default () => <div>...</div>// good caseexport default function User() { return <div>...</div>}正当组织公共办法
如果你的function组件须要用到一些比方解决数据、日期的办法，请将其放到function组件里面，一方面放弃function的简洁，一方面能够便于在别的中央重用这些办法。当然这些办法也能够对立放到utils外面去，决定权在你。
// bad casefunction Calendar({ date }) { function parseDate(date) { ... } return <div>Today is {parseDate(date)}</div>}// good casefunction parseDate(date) { ...}function Calendar({ date }) { return <div>Today is {parseDate(date)}</div>}善用map、filters等办法
比方须要展现一个人的兴趣爱好列表，并进行相干操作等
// bad casefunction 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 caseconst 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 casefunction Input(props) { return <input value={props.value} onChange={props.onChange} />}// good casefunction 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 caseisSubscribed ? ( <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 casefunction Component() { conse [name,setName]=useState('') const [phone, setPhone] = useState('') const [email, setEmail] = useState('') const [error, setError] = useSatte(null) return ( ... )}// good caseconst 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 ( ... )}临时先总结了这部分，当然一些常见的习惯没有写，在掘金许多大佬曾经总结过了，今后须要在一直的实际中总结晋升。