截至到现在,React18已经出来半个月了,是否还有小伙伴不太了解呢? 我给大家整理一份更新清单,包含了较常用的更新,列举了一些不错的案例和链接,方便大家快速上手和深入了解!
浏览器最低兼容提升
由于新版react使用了Promise,Symbol,Object.assign,所以要像IE和其他过于低版本的浏览器需要借助polyfill了
新的根API
// 之前根API,使用ReactDOM.render
ReactDOM.render(<App/>, document.getElementById('root'))
// 现在为了更符合工程学,和vue3一样,都引入了新的根api
import { createRoot } from 'react-dom/client';
const el = document.getElementById('app');
const root = createRoot(el);
root.render(<App />);
异步任务也将"批处理"
// 之前在异步任务里react无法拦截hooks进行批处理
setTimeout(()=>{ // 这样会更新两次视图
setCount(val => val+1)
setNum(val => val+1)
})
// 但是在18里将只会更新一次
转换更新API
// 当我们从一个视图转到另个视图时,一般都是非紧急更新,不像点击事件这种需要视图立即进行反馈
// 过渡更新不会阻塞与其他视图的交互
// 函数组件
import {useTransition} from 'react';
function App() {
// isPending 表示是否在过渡状态中
const [isPending, startTransition] = useTransition();
const [count, setCount] = useState(0);
function handleClick() {
startTransition(() => {
setCount(c => c + 1);
})
}
return (
<div>
{isPending && <Spinner />}
<button onClick={handleClick}>{count}</button>
</div>
);
}
// 类组件 不提供isPending这种状态值
import {Component, startTransition} from 'react';
class App extends Component{
// ...
// 紧急事件
setInputValue(input);
startTransition(() => {
// 过渡事件
setSearchQuery(input);
});
// ...
}
延迟hook: useDeferredValue
// 此hook有点类似于防抖,但是它没有固定的时间延迟,它会在React完成其他工作后立即进行更新,并且是可中断的,不会阻碍用户与其他视图的交互
const [deferredValue] = useDeferredValue(value);
Suspence
如果组件树的一部分尚未准备好显示,Suspense 允许您以声明方式指定组件树的加载状态:
// 我们来看这样一个例子,在过渡期间会变透明
const [isPending, startTransition] = useTransition();
function handleClick() {
startTransition(() => {
setTab('comments');
});
}
<Suspense fallback={<Spinner />}>
<div style={{ opacity: isPending ? 0.8 : 1 }}>
{tab === 'photos' ? <Photos /> : <Comments />}
</div>
</Suspense>
// useDeferredValue 结合 Suspense, 防止子组件在紧急更新时重新渲染
function Typeahead() {
const query = useSearchQuery('');
const deferredQuery = useDeferredValue(query);
const suggestions = useMemo(() =>
<SearchSuggestions query={deferredQuery} />,
[deferredQuery]
);
return (
<>
<SearchInput query={query} />
<Suspense fallback="Loading results...">
{suggestions}
</Suspense>
</>
);
}
还有更多实用的例子详看:suspense官方详解
useId
// 生成稳定的唯一ID
function Checkbox() {
const id = useId();
return (
<>
<label htmlFor={id}>Do you like React?</label>
<input id={id} type="checkbox" name="react"/>
</>
);
};
// 多个ID时
function NameFields() {
const id = useId();
return (
<div>
<label htmlFor={id + '-firstName'}>First Name</label>
<div>
<input id={id + '-firstName'} type="text" />
</div>
<label htmlFor={id + '-lastName'}>Last Name</label>
<div>
<input id={id + '-lastName'} type="text" />
</div>
</div>
);
}
TypeScript注解修复
children现在需要明确定义出来,具体原因可看我之前的文章 React+TypeScript必备
interface MyButtonProps {
color: string;
children?: React.ReactNode;
}
以上列举了较常用的更新,要想看更详细的更新细节可以进入 React18.0.0新功能介绍
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。