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

暂时先总结了这部分，当然一些常见的习惯没有写，在掘金许多大佬已经总结过了，今后需要在不断的实践中总结提升。