PREACT学习笔记

Posted 2021-04-26 前端加油鸭

组件

组件是Preact中的基本构建模块，它们主要用来方便的构建复杂的UI，以及将state渲染输出。

分为以下两种种组件及一种片段

1. 功能组件

2. 类组件

3. 片段

功能组件 

功能组件是简单的函数，它以prop作为第一个参数，函数名称必须以大写字母开头，以便JSX识别。

function MyComponent(props) { return <div>My name is {props.name}.</div>;}
// Usageconst App = <MyComponent name="John Doe" />;
// Renders: <div>My name is John Doe.</div>render(App, document.body);

类组件

类组件具有状态和生命周期。后者是特殊的方法，例如，当组件渲染到DOM或被销毁时，该方法将被调用。

class Clock extends Component {
 constructor() { super(); this.state = { time: Date.now() }; }
 // Lifecycle: Called whenever our component is created componentDidMount() { // update time every second this.timer = setInterval(() => { this.setState({ time: Date.now() }); }, 1000); }
 // Lifecycle: Called just before our component will be destroyed componentWillUnmount() { // stop when not renderable clearInterval(this.timer); }
 render() { let time = new Date(this.state.time).toLocaleTimeString(); return <span>{time}</span>; }}

• 生命周期
  

为了让时钟每秒更新一次，我们需要知道<Clock>何时挂载到DOM。类似于html5自定义元素，的AttachedCallback和detachedCallback生命周期方法。Preact，会调用以下生命周期方法：

生命周期方法	调用时机
componentWillMount	（不建议使用）组件挂载到DOM之前
componentDidMount	组件挂载到DOM之后
componentWillUnmount	在DOM中移除之前
componentWillReceiveProps	（不建议使用）在接受新props之前
getDerivedStateFromProps	在shouldComponentUpdate之前，小心使用
shouldComponentUpdate	在render()之前,返回false以跳过render
componentWillUpdate	(不建议使用）在render()之前
getSnapshotBeforeUpdate	在render（）之前调用
componentDidUpdate	在render（）之后

• componentDidCatch

componentDidCatch需要特别关注，特别是因为它允许你处理渲染期间发生的任何错误。它包括在生命周期中发生的所有错误，但不包括任何异步引发的错误，例如在fetch()调用之后。

当f发生错误时，我们可以使用此生命周期方法对任何错误做出反应，并显示错误消息或其他反馈信息。

class Catcher extends Component {
 constructor() { super(); this.state = { errored: false }; }
 componentDidCatch(error) { this.setState({ errored: true }); }
 render(props, state) { if (state.errored) { return <p>Something went badly wrong</p>; } return props.children; }}

Fragments

片段允许您一次返回多个元素，它解决了JSX的局限性，即每个“块”只有一个根元素。你经常会遇到将它与列表，表格或CSS flexbox结合使用的情况，其中任何中间元素都会影响样式。

import { Fragment, render } from 'preact';
function TodoItems() { return ( <Fragment> <li>A</li> <li>B</li> <li>C</li> </Fragment> )}
const App = ( <ul> <TodoItems /> <li>D</li> </ul>);
render(App, container);// Renders:// <ul>// <li>A</li>// <li>B</li>// <li>C</li>// <li>D</li>// </ul>

请注意，大多数现代编译器允许你对Fragment使用较短的语法。越短越常见，这是你通常会遇到的一种。

// This:const Foo = <Fragment>foo</Fragment>;// ...is the same as this:const Bar = <>foo</>;

您还可以从组件返回数组：

function Columns() { return [ <td>Hello</td>, <td>World</td> ];}

如果您在循环中创建片段，请不要忘记将其添加到片段中：

function Glossary(props) { return ( <dl> {props.items.map(item => ( // Without a key, Preact has to guess which items have // changed when re-rendering. <Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </Fragment> ))} </dl> );}