乐趣区

关于react.js:react实践总结

jiezi

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

临时先总结了这部分，当然一些常见的习惯没有写，在掘金许多大佬曾经总结过了，今后须要在一直的实际中总结晋升。

退出移动版