react實踐總結

寫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 (
    ...
  )
}

暫時先總結了這部分，固然一些常見的習慣沒有寫，在掘金許多大佬已經總結過了，從此須要在不斷的實踐中總結提高。