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
React
假如当咱们屡次调用useState
的时候,要保障每次渲染时它们的调用程序是不变的。- 通过在函数组件里调用它来给组件增加一些外部
state
,React
会 在反复渲染时保留这个 state useState
惟一的参数就是初始state
useState
会返回一个数组:一个state
,一个更新state
的函数- 在初始化渲染期间,返回的状态
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>
</>
);
}
参考 React 实战视频解说:进入学习
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 组件没有提供这样的办法。即便咱们提取出一个办法,咱们还是要在两个中央调用它。
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
属性 | 阐明 | 类型 | 默认值 |
---|---|---|---|
className | 类名 | string | – |
style | Row 组件款式 | object:CSSProperties | – |
align | 垂直对齐形式 | top|middle|bottom | top |
justify | 程度排列形式 | start|end|center|space-around|space-between | start |
gutter | 栅格距离,能够写成像素值设置程度垂直间距或者应用数组模式同时设置 [程度间距, 垂直间距] | number|[number,number] | 0 |
Col
属性 | 阐明 | 类型 | 默认值 |
---|---|---|---|
className | 类名 | string | – |
style | Col 组件款式 | object:CSSProperties | – |
flex | flex 布局属性 | string|number | – |
offset | 栅格左侧的距离格数,距离内不能够有栅格 | number | 0 |
order | 栅格程序 | number | 0 |
pull | 栅格向左挪动格数 | number | 0 |
push | 栅格向右挪动格数 | number | 0 |
span | 栅格占位格数,为 0 时相当于 display: none | number | – |
xs | <576px 响应式栅格,可为栅格数或一个蕴含其余属性的对象 | number|object | – |
sm | ≥576px 响应式栅格,可为栅格数或一个蕴含其余属性的对象 | number|object | – |
md | ≥768px 响应式栅格,可为栅格数或一个蕴含其余属性的对象 | number|object | – |
lg | ≥992px 响应式栅格,可为栅格数或一个蕴含其余属性的对象 | number|object | – |
xl | ≥1200px 响应式栅格,可为栅格数或一个蕴含其余属性的对象 | number|object | – |
xxl | ≥1600px 响应式栅格,可为栅格数或一个蕴含其余属性的对象 | number|object | – |
大展身手
这一实际次要介绍 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
的内容心愿读者去官方网站进行更深刻的学习。