美文网首页
写法技巧

写法技巧

作者: Shiki_思清 | 来源:发表于2020-12-16 10:58 被阅读0次
    1. 在if中判断数组长度不为零的正确姿势
    // good
    if (arr.length) {
        // todo
    }
    
    1. 为零
    // good
    if (!arr.length) {
        // todo
    }
    
    1. 判断数组是否包含某一项
    // good
    let arr = [1, 2, 3, 4]
    if (arr.includes(a)) {
        // todo
    }
    
    1. 解构数组进行变量值的替换
    // good
    let a = 1,
        b = 2
    [b, a] = [a, b]
    
    1. 解构时重命名简化命名
    // best
    setForm ({aaa_bbb_ccc_ddd: one, eee_fff_ggg: two}) {
        this.one = one
        this.two = two
    }
    
    1. 函数参数校验
    // good
    let checkoutType = () => {
        throw new Error('参数不能为空')
    }
    let findStudentByAge = (arr, age = checkoutType()) =>
        arr.filter(num => num === age)
    
    
    1. props 传递
    <Grid
      data={gridData}
      pagination={false}
      autoSize={true}
      enableSort={true}
      sortOrder="desc"
      disableSelection={true}
      infiniteScroll={true}
    />
    // --->
    onst options = {
      pagination: false,
      autoSize: true,
      enableSort: true,
      sortOrder: 'desc',
      disableSelection: true,
      infiniteScroll: true,
    }
    
    <Grid
      data={gridData}
      options={options}
    />
    
    
    1. useState 过多
    function AutocompleteInput() {
      const [isOpen, setIsOpen] = useState(false)
      const [inputValue, setInputValue] = useState('')
      const [items, setItems] = useState([])
      const [selectedItem, setSelectedItem] = useState(null)
      const [activeIndex, setActiveIndex] = useState(-1)
    
      const reset = () => {
        setIsOpen(false)
        setInputValue('')
        setItems([])
        setSelectedItem(null)
        setActiveIndex(-1)
      }
    
      const selectItem = (item) => {
        setIsOpen(false)
        setInputValue(item.name)
        setSelectedItem(item)
      }
    
      ...
    }
    
    

    替换成:

    const initialState = {
      isOpen: false,
      inputValue: "",
      items: [],
      selectedItem: null,
      activeIndex: -1
    }
    function reducer(state, action) {
      switch (action.type) {
        case "reset":
          return {
            ...initialState
          }
        case "selectItem":
          return {
            ...state,
            isOpen: false,
            inputValue: action.payload.name,
            selectedItem: action.payload
          }
        default:
          throw Error()
      }
    }
    
    function AutocompleteInput() {
      const [state, dispatch] = useReducer(reducer, initialState)
    
      const reset = () => {
        dispatch({ type: 'reset' })
      }
    
      const selectItem = (item) => {
        dispatch({ type: 'selectItem', payload: item })
      }
    
      ...
    }
    
    
    1. 单一职责useEffect
      useEffect(() => {
        fetch(`/posts/${id}`).then(/* do something */)
    
        setVisibility(unlisted)
      }, [id, unlisted])
    
    

    换成

      useEffect(() => { // when id changes fetch the post
        fetch(`/posts/${id}`).then(/* ... */)
      }, [id])
    
      useEffect(() => { // when unlisted changes update visibility
        setVisibility(unlisted)
      }, [unlisted])
    
    1. state 的多个状态
    function Component() {
      const [isLoading, setIsLoading] = useState(false)
      const [isFinished, setIsFinished] = useState(false)
      const [hasError, setHasError] = useState(false)
    
      const fetchSomething = () => {
        setIsLoading(true)
    
        fetch(url)
          .then(() => {
            setIsLoading(false)
            setIsFinished(true)
          })
          .catch(() => {
            setHasError(true)
          })
      }
    
      if (isLoading) return <Loader />
      if (hasError) return <Error />
      if (isFinished) return <Success />
    
      return <button onClick={fetchSomething} />
    }
    
    

    替换成:

    function Component() {
      const [state, setState] = useState('idle')
    
      const fetchSomething = () => {
        setState('loading')
    
        fetch(url)
          .then(() => {
            setState('finished')
          })
          .catch(() => {
            setState('error')
          })
      }
    
      if (state === 'loading') return <Loader />
      if (state === 'error') return <Error />
      if (state === 'finished') return <Success />
    
      return <button onClick={fetchSomething} />
    }
    

    替换成Typescript

    const [state, setState] = useState<'idle' | 'loading' | 'error' | 'finished'>('idle')
    
    

    相关文章

      网友评论

          本文标题:写法技巧

          本文链接:https://www.haomeiwen.com/subject/katwiktx.html