关于react.js:ReacthooksTypeScript最佳实战

React Hooks

什么是 Hooks

• React 始终都提倡应用函数组件，然而有时候须要应用 state 或者其余一些性能时，只能应用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有。
• Hooks 是 React 16.8 新增的个性，它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性。
• 如果你在编写函数组件并意识到须要向其增加一些 state，以前的做法是必须将其它转化为 class。当初你能够间接在现有的函数组件中应用 Hooks。
• use 结尾的 React API 都是 Hooks。

Hooks 解决了哪些问题?

• 状态逻辑难复用

  • 在组件之间复用状态逻辑很难，可能要用到 render props（渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（个别都是 div 元素），导致层级冗余。

• 趋势简单难以保护

  • 在生命周期函数中混淆不相干的逻辑（如：在 componentDidMount 中注册事件以及其余的逻辑，在 componentWillUnmount 中卸载事件，这样扩散不集中的写法，很容易写出 Bug）。
  • 类组件中到处都是对状态的拜访和解决，导致组件难以拆分成更小的组件。

• this 指向问题

  • 父组件给子组件传递函数时，必须绑定 this

Hooks 劣势

• 能优化类组件的三大问题
• 能在无需批改组件构造的状况下复用状态逻辑（自定义 Hooks）
• 能将组件中互相关联的局部拆分成更小的函数（比方设置订阅或申请数据）

• 副作用的关注点拆散

  • 副作用指那些没有产生在数据向视图转换过程中的逻辑，如 Ajax 申请、拜访原生 DOM 元素、本地长久化缓存、绑定 / 解绑事件、增加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。

罕用 Hooks

useState

1. React 假如当咱们屡次调用 useState 的时候，要保障每次渲染时它们的调用程序是不变的。
2. 通过在函数组件里调用它来给组件增加一些外部 state，React 会 在反复渲染时保留这个 state
3. useState 惟一的参数就是初始 state
4. useState 会返回一个数组：一个 state，一个更新 state 的函数
5. 在初始化渲染期间，返回的状态 state 与传入的第一个参数 initialState 值雷同。
   咱们能够在事件处理函数中或其余一些中央调用更新 state 的函数。它相似 class 组件的 this.setState，然而它不会把新的 state 和旧的 state 进行合并，而是间接替换。

应用办法

const [state, setState] = useState(initialState);

举个例子

import React, {useState} from 'react';

function Counter() {const [counter, setCounter] = useState(0);

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>counter + 1</button>
    </>
  );
}

export default Counter;

每次渲染都是一个独立的闭包

• 每一次渲染都有它本人的 Props 和 State
• 每一次渲染都有它本人的事件处理函数
• 当点击更新状态的时候，函数组件都会从新被调用，那么每次渲染都是独立的，取到的值不会受前面操作的影响

举个例子

function Counter() {const [counter, setCounter] = useState(0);
  function alertNumber() {setTimeout(() => {
      // 只能获取到点击按钮时的那个状态
      alert(counter);
    }, 3000);
  }
  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>counter + 1</button>
      <button onClick={alertNumber}>alertCounter</button>
    </>
  );
}

函数式更新

如果新的 state 须要通过应用先前的 state 计算得出，那么能够将回调函数当做参数传递给 setState。该回调函数将接管先前的 state，并返回一个更新后的值。

举个例子

function Counter() {const [counter, setCounter] = useState(0);

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter => counter + 10)}>        counter + 10      </button>
    </>
  );
}

惰性初始化

• initialState 参数只会在组件的初始化渲染中起作用，后续渲染时会被疏忽
• 如果初始 state 须要通过简单计算取得，则能够传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

举个例子

function Counter4() {console.log('Counter render');

  // 这个函数只在初始渲染时执行一次，后续更新状态从新渲染组件时，该函数就不会再被调用
  function getInitState() {console.log('getInitState');
    // 简单的计算
    return 100;
  }

  let [counter, setCounter] = useState(getInitState);

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
    </>
  );
}

useEffect

• effect（副作用）：指那些没有产生在数据向视图转换过程中的逻辑，如 ajax 申请、拜访原生 dom 元素、本地长久化缓存、绑定 / 解绑事件、增加订阅、设置定时器、记录日志等。
• 副作用操作能够分两类：须要革除的和不须要革除的。
• 原先在函数组件内（这里指在 React 渲染阶段）扭转 dom、发送 ajax 申请以及执行其余蕴含副作用的操作都是不被容许的，因为这可能会产生莫名其妙的 bug 并毁坏 UI 的一致性
• useEffect 就是一个 Effect Hook，给函数组件减少了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具备雷同的用处，只不过被合并成了一个 API
• useEffect 接管一个函数，该函数会在组件渲染到屏幕之后才执行，该函数有要求：要么返回一个能革除副作用的函数，要么就不返回任何内容
• 与 componentDidMount 或 componentDidUpdate 不同，应用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的利用看起来响应更快。大多数状况下，effect 不须要同步地执行。在个别情况下（例如测量布局），有独自的 useLayoutEffect Hook 供你应用，其 API 与 useEffect 雷同。

应用办法

const App => () => {useEffect(()=>{})
  // 或者
  useEffect(()=>{},[...])
  return <></>
}

应用 class 组件实现批改题目

在这个 class 中，咱们须要在两个生命周期函数中编写反复的代码，这是因为很多状况下，咱们心愿在组件加载和更新时执行同样的操作。咱们心愿它在每次渲染之后执行，但 React 的 class 组件没有提供这样的办法。即便咱们提取出一个办法，咱们还是要在两个中央调用它。参考 React 实战视频解说：进入学习

class Counter extends React.Component{state = {number:0};
    add = ()=>{this.setState({number:this.state.number+1});
    };
    componentDidMount(){this.changeTitle();
    }
    componentDidUpdate(){this.changeTitle();
    }
    changeTitle = ()=>{document.title = ` 你曾经点击了 ${this.state.number}次 `;
    };
    render(){
        return (
            <>
              <p>{this.state.number}</p>
              <button onClick={this.add}>+</button>
            </>
        )
    }
}

应用 useEffect 组件实现批改题目

function Counter(){const [number,setNumber] = useState(0);
    // useEffect 外面的这个函数会在第一次渲染之后和更新实现后执行
    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {document.title = ` 你点击了 ${number}次 `;
    });
    return (
        <>
            <p>{number}</p>
            <button onClick={()=>setNumber(number+1)}>+</button>
        </>
    )
}

useEffect 做了什么？ 通过应用这个 Hook，你能够通知 React 组件须要在渲染后执行某些操作。React 会保留你传递的函数（咱们将它称之为“effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，咱们设置了 document 的 title 属性，不过咱们也能够执行数据获取或调用其余命令式的 API。

为什么在组件外部调用 useEffect？ 将 useEffect 放在组件外部让咱们能够在 effect 中间接拜访 count state 变量（或其余 props）。咱们不须要非凡的 API 来读取它 —— 它曾经保留在函数作用域中。Hook 应用了 JavaScript 的闭包机制，而不必在 JavaScript 曾经提供了解决方案的状况下，还引入特定的 React API。

useEffect 会在每次渲染后都执行吗？ 是的，默认状况下，它在第一次渲染之后和每次更新之后都会执行。（咱们稍后谈判到如何管制它）你可能会更容易接受 effect 产生在“渲染之后”这种概念，不必再去思考“挂载”还是“更新”。React 保障了每次运行 effect 的同时，DOM 都曾经更新结束。

革除副作用

• 副作用函数还能够通过返回一个函数来指定如何革除副作用，为避免内存透露，革除函数会在组件卸载前执行。如果组件屡次渲染，则在执行下一个 effect 之前，上一个 effect 就已被革除。

function Counter(){let [number,setNumber] = useState(0);
  let  = useState('');
  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(()=>{console.log('开启一个新的定时器')
      let timer = setInterval(()=>{setNumber(number=>number+1);
      },1000);
      // useEffect 如果返回一个函数的话，该函数会在组件卸载和更新时调用
      // useEffect 在执行副作用函数之前，会先调用上一次返回的函数
      // 如果要革除副作用，要么返回一个革除副作用的函数
      // return ()=>{//     console.log('destroy effect');
      //     clearInterval($timer);
      // }
  });
  // },[]);// 要么在这里传入一个空的依赖项数组，这样就不会去反复执行
  return (
      <>
        <input value={text} onChange={(event)=>setText(event.target.value)}/>        <p>{number}</p>
        <button>+</button>
      </>
  )
}

跳过 Effect 进行性能优化

• 依赖项数组管制着 useEffect 的执行
• 如果某些特定值在两次重渲染之间没有发生变化，你能够告诉 React 跳过对 effect 的调用，只有传递数组作为 useEffect 的第二个可选参数即可
• 如果想执行只运行一次的 effect（仅在组件挂载时执行），能够传递一个空数组（[]）作为第二个参数。这就通知 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不须要反复执行

function Counter(){let [number,setNumber] = useState(0);
  let  = useState('');
  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(()=>{console.log('useEffect');
      let timer = setInterval(()=>{setNumber(number=>number+1);
      },1000);
  },);// 数组示意 effect 依赖的变量，只有当这个变量产生扭转之后才会从新执行 efffect 函数
  return (
      <>
        <input value={text} onChange={(e)=>setText(e.target.value)}/>        <p>{number}</p>
        <button>+</button>
      </>
  )
}

应用多个 Effect 实现关注点拆散

• 应用 Hook 其中一个目标就是要解决 class 中生命周期函数常常蕴含不相干的逻辑，但又把相干逻辑拆散到了几个不同办法中的问题。

// class 版

class FriendStatusWithCounter extends React.Component {constructor(props) {super(props);
    this.state = {count: 0, isOnline: null};
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate() {document.title = `You clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({isOnline: status.isOnline});
  }
  // ...

• 咱们能够发现 document.title 的逻辑是如何被宰割到 componentDidMount 和 componentDidUpdate 中的，订阅逻辑又是如何被宰割到 componentDidMount 和 componentWillUnmount 中的。而且 componentDidMount 中同时蕴含了两个不同性能的代码。这样会使得生命周期函数很凌乱。
• Hook 容许咱们依照代码的用处拆散他们，而不是像生命周期函数那样。React 将依照 effect 申明的程序顺次调用组件中的 每一个 effect。

// Hooks 版

function FriendStatusWithCounter(props) {const [count, setCount] = useState(0);
  useEffect(() => {document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

useContext

const value = useContext(MyContext);

接管一个 context 对象（React.createContext 的返回值）并返回该 context 的以后值。以后的 context 值由下层组件中距离以后组件最近的 <MyContext.Provider> 的 value prop 决定。

当组件下层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并应用最新传递给 MyContext provider 的 context value 值。即便先人应用 React.memo 或 shouldComponentUpdate，也会在组件自身应用 useContext 时从新渲染。

别忘记 useContext 的参数必须是 context 对象自身：

• 正确：useContext(MyContext)
• 谬误：useContext(MyContext.Consumer)
• 谬误：useContext(MyContext.Provider)

提醒
如果你在接触 Hook 前曾经对 context API 比拟相熟，那应该能够了解，useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>。useContext(MyContext) 只是让你可能读取 context 的值以及订阅 context 的变动。你依然须要在下层组件树中应用 <MyContext.Provider> 来为上层组件提供 context。

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (<ThemeContext.Provider value={themes.light}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {const theme = useContext(ThemeContext);
  return (<button style={{ background: theme.background, color: theme.foreground}}>
      I am styled by theme context!    </button>
  );
}

自定义 Hooks

• 自定义 Hook 更像是一种约定，而不是一种性能。如果函数的名字以 use 结尾，并且调用了其余的 Hook，则就称其为一个自定义 Hook
• 有时候咱们会想要在组件之间重用一些状态逻辑，之前要么用 render props，要么用高阶组件，要么应用 redux
• 自定义 Hook 能够让你在不减少组件的状况下达到同样的目标
• Hook 是一种复用状态逻辑的形式，它不复用 state 自身
• 事实上 Hook 的每次调用都有一个齐全独立的 state

function useNumber(){let [number,setNumber] = useState(0);
  useEffect(()=>{setInterval(()=>{setNumber(number=>number+1);
    },1000);
  },[]);
  return [number,setNumber];
}
// 每个组件调用同一个 hook，只是复用 hook 的状态逻辑，并不会共用一个状态
function Counter1(){let [number,setNumber] = useNumber();
    return (<div><button onClick={()=>{setNumber(number+1)
        }}>{number}</button></div>
    )
}
function Counter2(){let [number,setNumber] = useNumber();
    return (<div><button  onClick={()=>{setNumber(number+1)
        }}>{number}</button></div>
    )
}

useMemo、useCallback

const memoizedCallback = useCallback(() => {doSomething(a, b);
  },
  [a, b],
);

在 a 和b的变量值不变的状况下，memoizedCallback的援用不变。即：useCallback的第一个入参函数会被缓存，从而达到渲染性能优化的目标。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在 a 和b的变量值不变的状况下，memoizedValue的值不变。即：useMemo函数的第一个入参函数不会被执行，从而达到节俭计算量的目标。

性能优化

Object.is 浅比拟

• Hook 外部应用 Object.is 来比拟新旧 state 是否相等。
• 与 class 组件中的 setState 办法不同，如果你批改状态的时候，传的状态值没有变动，则不从新渲染。
• 与 class 组件中的 setState 办法不同，useState 不会主动合并更新对象。你能够用函数式的 setState 联合开展运算符来达到合并更新对象的成果。

function Counter(){const [counter,setCounter] = useState({name:'计数器',number:0});
    console.log('render Counter')
    // 如果你批改状态的时候，传的状态值没有变动，则不从新渲染
    return (
        <>
            <p>{counter.name}:{counter.number}</p>
            <button onClick={()=>setCounter({...counter,number:counter.number+1})}>+</button>
            <button onClick={()=>setCounter(counter)}>++</button>
        </>
    )
}

缩小渲染次数

• 默认状况，只有父组件状态变了（不论子组件依不依赖该状态），子组件也会从新渲染

• 个别的优化：

  • 类组件：能够应用 pureComponent；
  • 函数组件：应用 React.memo，将函数组件传递给 memo 之后，就会返回一个新的组件，新组件的性能：如果承受到的属性不变，则不从新渲染函数。
• 然而怎么保障属性不会变呢？这里应用 useState，每次更新都是独立的，const [number,setNumber] = useState(0) 也就是说每次都会生成一个新的值（哪怕这个值没有变动），即便应用了 React.memo，也还是会从新渲染。

const SubCounter = React.memo(({onClick,data}) =>{console.log('SubCounter render');
  return (<button onClick={onClick}>{data.number}</button>
  )
})
const ParentCounter = () => {console.log('ParentCounter render');
  const [name,setName]= useState('计数器');
  const [number,setNumber] = useState(0);
  const data ={number};
  const addClick = ()=>{setNumber(number+1);
  };
  return (
      <>
          <input type="text" value={name} onChange={(e)=>setName(e.target.value)}/>          <SubCounter data={data} onClick={addClick}/>
      </>
  )
}

• 更深刻的优化 - 应用 useMemo & useCallback

const SubCounter = React.memo(({onClick,data}) =>{console.log('SubCounter render');
  return (<button onClick={onClick}>{data.number}</button>
  )
})
const ParentCounter = () => {console.log('ParentCounter render');
  const [name,setName]= useState('计数器');
  const [number, setNumber] = useState(0);
  // 父组件更新时，这里的变量和函数每次都会从新创立，那么子组件承受到的属性每次都会认为是新的
  // 所以子组件也会随之更新，这时候能够用到 useMemo
  // 有没有前面的依赖项数组很重要，否则还是会从新渲染
  // 如果前面的依赖项数组没有值的话，即便父组件的 number 值扭转了，子组件也不会去更新
  //const data = useMemo(()=>({number}),[]);
  const data = useMemo(()=>({number}),[number]);
  const addClick = useCallback(()=>{setNumber(number+1);
  },[number]);
  return (
      <>
          <input type="text" value={name} onChange={(e)=>setName(e.target.value)}/>          <SubCounter data={data} onClick={addClick}/>
      </>
  )
}

常见问题

useEffect 不能接管 async 作为回调函数

React 规定 useEffect 接管的函数，要么返回一个能革除副作用的函数，要么就不返回任何内容。而 async 返回的是 promise。

如何在 Hooks 中优雅的 Fetch Data

function App() {const [data, setData] = useState({hits: [] });
  useEffect(() => {
    // 更优雅的形式
    const fetchData = async () => {
      const result = await axios('https://api.github.com/api/v3/search?query=redux',);
      setData(result.data);
    };
    fetchData();}, []);
  return (
    <ul>
      {data.hits.map(item => (        <li key={item.id}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}    </ul>
  );
}

不要适度依赖 useMemo

• useMemo 自身也有开销。useMemo 会「记住」一些值，同时在后续 render 时，将依赖数组中的值取出来和上一次记录的值进行比拟，如果不相等才会从新执行回调函数，否则间接返回「记住」的值。这个过程自身就会耗费肯定的内存和计算资源。因而，适度应用 useMemo 可能会影响程序的性能。

• 在应用 useMemo 前，应该先思考三个问题:

  • 传递给 useMemo 的函数开销大不大？ 有些计算开销很大，咱们就须要「记住」它的返回值，防止每次 render 都去从新计算。如果你执行的操作开销不大，那么就不须要记住返回值。否则，应用 useMemo 自身的开销就可能超过从新计算这个值的开销。因而，对于一些简略的 JS 运算来说，咱们不须要应用 useMemo 来「记住」它的返回值。
  • 返回的值是原始值吗？ 如果计算出来的是根本类型的值（string、boolean、null、undefined、number、symbol），那么每次比拟都是相等的，上游组件就不会从新渲染；如果计算出来的是简单类型的值（object、array），哪怕值不变，然而地址会发生变化，导致上游组件从新渲染。所以咱们也须要「记住」这个值。
  • 在编写自定义 Hook 时，返回值肯定要放弃援用的一致性。因为你无奈确定内部要如何应用它的返回值。如果返回值被用做其余 Hook 的依赖，并且每次 re-render 时援用不统一（当值相等的状况），就可能会产生 bug。所以如果自定义 Hook 中裸露进去的值是 object、array、函数等，都应该应用 useMemo。以确保当值雷同时，援用不发生变化。

TypeScript

什么是 TypeScript

TypeScript 是 JavaScript 的一个超集，次要提供了 类型零碎 和对 ES6 的反对。

为什么抉择 TypeScript

• TypeScript 减少了代码的可读性和可维护性

  • 类型零碎实际上是最好的文档，大部分的函数看看类型的定义就能够晓得如何应用了
  • 能够在编译阶段就发现大部分谬误，这总比在运行时候出错好
  • 加强了编辑器和 IDE 的性能，包含代码补全、接口提醒、跳转到定义、重构等

• TypeScript 十分容纳

  • TypeScript 是 JavaScript 的超集，.js 文件能够间接重命名为 .ts 即可
  • 即便不显式的定义类型，也可能主动做出类型推论
  • 能够定义从简略到简单的简直所有类型
  • 即便 TypeScript 编译报错，也能够生成 JavaScript 文件
  • 兼容第三方库，即便第三方库不是用 TypeScript 写的，也能够编写独自的类型文件供 TypeScript 读取

• TypeScript 领有沉闷的社区

  • 大部分第三方库都有提供给 TypeScript 的类型定义文件
  • TypeScript 拥抱了 ES6 标准，也反对局部 ESNext 草案的标准

理解了 React Hooks 和 TypeScript，接下来就一起看一下二者的联合实际吧！😄

实际

本实际来源于自己正在开发的开源组件库我的项目 Azir Design 中的 Grid 栅格布局组件。

指标

API

Row

Col

大展身手

这一实际次要介绍 React Hooks + TypeScript 的实际，不对 CSS 过多赘述。

Step-1 依据 API 来给 Row 组件定义 Prop 的类型

// Row.tsx

+ import React, {CSSProperties, ReactNode} from 'react';
+ import import ClassNames from 'classnames';
+
+ type gutter = number | [number, number];
+ type align = 'top' | 'middle' | 'bottom';
+ type justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+
+ interface RowProps {
+   className?: string;
+   align?: align;
+   justify?: justify;
+   gutter?: gutter;
+   style?: CSSProperties;
+   children?: ReactNode;
+ }

这里咱们用到了 TypeScript 提供的根本数据类型、联结类型、接口。

根本数据类型 JavaScript 的类型分为两种： 原始数据类型（Primitive data types）和 对象类型（Object types）。

原始数据类型包含：布尔值 、 数值 、 字符串、null、undefined 以及 ES6 中的新类型 Symbol。咱们次要介绍前五种原始数据类型在 TypeScript 中的利用。

联结类型 联结类型（Union Types）示意取值能够为多种类型中的一种。

类型别名 类型别名用来给一个类型起个新名字。

接口 在 TypeScript 中接口是一个非常灵活的概念，除了可用于对类的一部分行为进行形象以外，也罕用于对 对象的形态（Shape）进行形容。咱们在这里应用接口对 RowProps 进行了形容。

Step-2 编写 Row 组件的根底骨架

// Row.tsx

- import React, {CSSProperties, ReactNode} from 'react';
+ import React, {CSSProperties, ReactNode, FC} from 'react';

import ClassNames from 'classnames';

type gutter = number | [number, number];
type align = 'top' | 'middle' | 'bottom';
type justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';

interface RowProps {// ...}
+ const Row: FC<RowProps> = props => {+   const { className, align, justify, children, style = {} } = props;
+   const classes = ClassNames('azir-row', className, {+     [`azir-row-${align}`]: align,
+     [`azir-row-${justify}`]: justify
+   });
+
+   return (+     <div className={classes} style={style}>
+       {children}+     </div>
+   );
+ };

+ Row.defaultProps = {
+   align: 'top',
+   justify: 'start',
+   gutter: 0
+ };

+ export default Row;

在这里咱们应用到了 泛型，那么什么是泛型呢？

泛型 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在应用的时候再指定类型的一种个性。

function loggingIdentity<T>(arg: T): T {return arg;}

Step-3 依据 API 来给 Col 组件定义 Prop 的类型

// Col.tsx

+ import React, {ReactNode, CSSProperties} from 'react';
+ import ClassNames from 'classnames';
+
+ interface ColCSSProps {
+   offset?: number;
+   order?: number;
+   pull?: number;
+   push?: number;
+   span?: number;
+ }
+
+ export interface ColProps {
+   className?: string;
+   style?: CSSProperties;
+   children?: ReactNode;
+   flex?: string | number;
+   offset?: number;
+   order?: number;
+   pull?: number;
+   push?: number;
+   span?: number;
+   xs?: ColCSSProps;
+   sm?: ColCSSProps;
+   md?: ColCSSProps;
+   lg?: ColCSSProps;
+   xl?: ColCSSProps;
+   xxl?: ColCSSProps;
+ }

Step-4 编写 Col 组件的根底骨架

// Col.tsx

import React, {ReactNode, CSSProperties} from 'react';
import ClassNames from 'classnames';
interface ColCSSProps {// ...}
export interface ColProps {// ...}

+ type mediaScreen = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

+ function sc(size: mediaScreen, value: ColCSSProps): Array<string> {+   const t: Array<string> = [];
+   Object.keys(value).forEach(key => {+     t.push(`azir-col-${size}-${key}-${value[key]}`);
+   });
+   return t;
+ }

+ const Col: FC<ColProps> = props => {
+   const {
+    className,
+    style = {},
+    span,
+    offset,
+    children,
+    pull,
+    push,
+    order,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
+   } = props;
+
+   const [classes, setClasses] = useState<string>(
+    ClassNames('azir-col', className, {+      [`azir-col-span-${span}`]: span,
+      [`azir-col-offset-${offset}`]: offset,
+      [`azir-col-pull-${pull}`]: pull,
+      [`azir-col-push-${push}`]: push,
+      [`azir-col-order-${order}`]: order
+    })
+   );
+
+   // 响应式 xs,sm,md,lg,xl,xxl
+   useEffect(() => {+     xs && setClasses(classes => ClassNames(classes, sc('xs', xs)));
+     sm && setClasses(classes => ClassNames(classes, sc('sm', sm)));
+     md && setClasses(classes => ClassNames(classes, sc('md', md)));
+     lg && setClasses(classes => ClassNames(classes, sc('lg', lg)));
+     xl && setClasses(classes => ClassNames(classes, sc('xl', xl)));
+     xxl && setClasses(classes => ClassNames(classes, sc('xxl', xxl)));
+   }, [xs, sm, md, lg, xl, xxl]);
+
+   return (+     <div className={classes} style={style}>
+       {children}+     </div>
+   );
+ };
+ Col.defaultProps = {
+   offset: 0,
+   pull: 0,
+   push: 0,
+   span: 24
+ };
+ Col.displayName = 'Col';
+
+ export default Col;

在这里 TypeScript 编译器抛出了正告。

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type'ColCSSProps'.
  No index signature with a parameter of type 'string' was found on type 'ColCSSProps'.  TS7053

    71 |       const t: Array<string> = [];
    72 |       Object.keys(value).forEach(key => {> 73 |         t.push(`azir-col-${size}-${key}-${value[key]}`);
       |                                           ^
    74 |       });
    75 |       return t;
    76 |     }

翻译过去就是：元素隐式地具备 any 类型，类型 string 不能用于 ColCSSProps 的索引类型。那么这个问题该如何终局呢？

interface ColCSSProps {
  offset?: number;
  order?: number;
  pull?: number;
  push?: number;
  span?: number;
+  [key: string]: number | undefined;
}

咱们只须要通知 TypeScript ColCSSProps 的键类型是 string 值类型为 number | undefined 就能够了。

测试

写到当初，该测试一下代码了。

// example.tsx

import React from 'react';
import Row from './row';
import Col from './col';
export default () => {
  return (<div data-test="row-test" style={{ padding: '20px'}}>
      <Row className="jd-share">
        <Col style={{background: 'red'}} span={2}>
          123        </Col>
        <Col style={{background: 'yellow'}} offset={2} span={4}>
          123        </Col>
        <Col style={{background: 'blue'}} span={6}>
          123        </Col>
      </Row>
      <Row>
        <Col order={1} span={8} xs={{span: 20}} lg={{span: 11, offset: 1}}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col1          </div>
        </Col>
        <Col span={4} xs={{span: 4}} lg={{span: 12}}>
          <div style={{height: '80px', backgroundColor: '#2170bb'}}>Col2</div>
        </Col>
      </Row>
    </div>
  );
};

xs 尺寸屏幕下

lg 尺寸屏幕下

至此呢，成果还算不错。

Step-5 限度 Row 组件的 Children

尽管成果还不错，然而 Row 组件的 Children 能够传递任何元素

// row.tsx

const Row: FC<RowProps> = props => {

  // ...

  return (<div className={classes} style={style}>
      {children}    </div>
  );
};

这也太随便了吧！如果 Children 中蕴含了不是 Col 组件的节点的话布局必定会出问题，我决定在这里限度一下 Row 组件的 Children 类型。

那么该如何去限度呢？有的人会认为，间接 children.map，依据构造来判断不就能够了吗？这样做是不可取的，React 官网也指出在 children 上间接调用 map 是十分危险的，因为咱们不可能确定 children 的类型。那该怎么办呢？React 官网很贴心的也给咱们提供了一个 API React.Children

在这之前咱们先给 Col 组件设置一个内置属性 displayName 属性来帮忙咱们判断类型。

// col.tsx

const Col: FC<ColProps> = props => {// ...};
// ...
+ Col.displayName = 'Col';

而后咱们请出因为大哥 React.Children API。这个 API 能够专门用来解决 Children。咱们给 Row 组件编写一个 renderChildren 函数

// row.tsx
const Row: FC<RowProps> = props => {const { className, align, justify, children, style = {} } = props;
  const classes = ClassNames('azir-row', className, {[`azir-row-${align}`]: align,
    [`azir-row-${justify}`]: justify
  });

+  const renderChildren = useCallback(() => {+     return React.Children.map(children, (child, index) => {
+       try {
+         // child 是 ReactNode 类型，在该类型下有很多子类型，咱们须要断言一下
+         const childElement = child as React.FunctionComponentElement<ColProps>;
+         const {displayName} = childElement.type;
+         if (displayName === 'Col') {
+           return child;
+         } else {
+           console.error(
+             'Warning: Row has a child which is not a Col component'
+           );
+         }
+       } catch (e) {+         console.error('Warning: Row has a child which is not a Col component');
+       }
+     });
+   }, [children]);

  return (<div className={classes} style={style}>
-     {children}+     {renderChildren()}    </div>
  );
};

至此咱们曾经实现了 80% 的工作，咱们是不是忘了点什么？？？

Step-6 精益求精 -gutter

咱们通过 外层 margin + 内层 padding 的模式来配合实现程度垂直间距的设置。

// row.tsx

import React, {CSSProperties, ReactNode, FC, FunctionComponentElement, useCallback, useEffect, useState} from 'react';

// ...

const Row: FC<RowProps> = props => {-  const { className, align, justify, children, style = {} } = props;
+  const {className, align, justify, children, gutter, style = {} } = props;

+ const [rowStyle, setRowStyle] = useState<CSSProperties>(style);

  // ...

  return (-   <div className={classes} style={style}>
+   <div className={classes} style={rowStyle}>

      {renderChildren()}    </div>
  );};// ...export default Row;

Row 组件的 margin 曾经这设置好了，那么 Col 组件的 padding 该怎么办呢？有两中方法，一是传递 props、二是应用 context，我决定应用 context 来做组件通信，因为我并不想让 Col 组件的 props 太多太乱（曾经够乱了 …）。

// row.tsx

import React, {CSSProperties, ReactNode, FC, FunctionComponentElement, useCallback, useEffect, useState} from 'react';

// ...


export interface RowContext {gutter?: gutter;}
export const RowContext = createContext<RowContext>({});

const Row: FC<RowProps> = props => {-  const { className, align, justify, children, style = {} } = props;
+  const {className, align, justify, children, gutter, style = {} } = props;

+ const [rowStyle, setRowStyle] = useState<CSSProperties>(style);

+ const passedContext: RowContext = {
+   gutter
+ };

  // ...

  return (<div className={classes} style={rowStyle}>
+     <RowContext.Provider value={passedContext}>
        {renderChildren()}+     </RowContext.Provider>
    </div>
  );
};

// ...

export default Row;

咱们在 Row 组件中创立了一个 context，接下来就要在 Col 组件中应用，并计算出 Col 组件 gutter 对应的 padding 值。

// col.tsx
import React, {
  ReactNode,
  CSSProperties,
  FC,
  useState,
  useEffect,
+  useContext
} from 'react';
import ClassNames from 'classnames';
+ import {RowContext} from './row';

  // ...
const Col: FC<ColProps> = props => {
  // ...

+ const [colStyle, setColStyle] = useState<CSSProperties>(style);
+ const {gutter} = useContext(RowContext);
+ // 程度垂直间距
+ useEffect(() => {+   if (Object.prototype.toString.call(gutter) === '[object Number]') {
+     const padding = gutter as number;
+     if (padding >= 0) {
+       setColStyle(style => ({+         padding: `${padding / 2}px`,
+         ...style
+       }));
+     }
+   }
+   if (Object.prototype.toString.call(gutter) === '[object Array]') {+     const [paddingX, paddingY] = gutter as [number, number];
+     if (paddingX >= 0 && paddingY >= 0) {
+       setColStyle(style => ({+         padding: `${paddingY / 2}px ${paddingX / 2}px`,
+         ...style
+       }));
+     }
+   }
+ }, [gutter]);
  // ...

  return (-   <div className={classes} style={style}>
+   <div className={classes} style={colStyle}>
      {children}    </div>
  );};// ...export default Col;

到这里呢，咱们的栅格组件就功败垂成啦！咱们来测试一下吧！😄

测试

import React from 'react';
import Row from './row';
import Col from './col';
export default () => {
  return (<div data-test="row-test" style={{ padding: '20px'}}>
      <Row>
        <Col span={24}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col1          </div>
        </Col>
      </Row>
      <Row gutter={10}>
        <Col order={1} span={8} xs={{span: 20}} lg={{span: 11, offset: 1}}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col1          </div>
        </Col>
        <Col span={4} xs={{span: 4}} lg={{span: 12}}>
          <div style={{height: '80px', backgroundColor: '#2170bb'}}>Col2</div>
        </Col>
      </Row>
      <Row gutter={10} align="middle">
        <Col span={8}>
          <div style={{height: '80px', backgroundColor: '#2170bb'}}>Col1</div>
        </Col>
        <Col offset={8} span={8}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col2          </div>
        </Col>
      </Row>
      <Row gutter={10} align="bottom">
        <Col span={4}>
          <div style={{height: '80px', backgroundColor: '#2170bb'}}>Col1</div>
        </Col>
        <Col span={8}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col2          </div>
        </Col>
        <Col push={3} span={9}>
          <div style={{height: '130px', backgroundColor: '#2170bb'}}>
            Col3          </div>
        </Col>
        <Col span={4}>
          <div style={{height: '80px', backgroundColor: '#2170bb'}}>Col1</div>
        </Col>
        <Col span={8}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col2          </div>
        </Col>
        <Col span={8}>
          <div style={{height: '130px', backgroundColor: '#2170bb'}}>
            Col3          </div>
        </Col>
        <Col pull={1} span={3}>
          <div style={{height: '100px', backgroundColor: '#3170bb'}}>
            Col2          </div>
        </Col>
      </Row>
    </div>
  );
};

总结

至此 React Hooks + TypeScript 的实际分享完结了，我这只列举了比拟罕用 Hooks API 和 TypeScript 的个性，麻雀虽小、五脏俱全，咱们曾经能够领会到 React Hooks + TypeScript 带来的益处，二者的配合肯定会让咱们的代码变得既笨重有强壮。对于 Hooks 和 TypeScript 的内容心愿读者去官方网站进行更深刻的学习。