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

暂时先总结了这部分，固然一些常见的习惯没有写，在掘金许多大佬已经总结过了，从此须要在不断的实践中总结提高。