mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
1655 lines
280 KiB
HTML
1655 lines
280 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>React 备忘清单
|
||
& react cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="适合初学者的综合 React 备忘清单
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="react,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/react.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="react-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
|
||
<circle cx="12" cy="11.245" r="1.785"></circle>
|
||
<path d="m7.002 14.794-.395-.101c-2.934-.741-4.617-2.001-4.617-3.452 0-1.452 1.684-2.711 4.617-3.452l.395-.1.111.391a19.507 19.507 0 0 0 1.136 2.983l.085.178-.085.178c-.46.963-.841 1.961-1.136 2.985l-.111.39zm-.577-6.095c-2.229.628-3.598 1.586-3.598 2.542 0 .954 1.368 1.913 3.598 2.54.273-.868.603-1.717.985-2.54a20.356 20.356 0 0 1-.985-2.542zm10.572 6.095-.11-.392a19.628 19.628 0 0 0-1.137-2.984l-.085-.177.085-.179c.46-.961.839-1.96 1.137-2.984l.11-.39.395.1c2.935.741 4.617 2 4.617 3.453 0 1.452-1.683 2.711-4.617 3.452l-.395.101zm-.41-3.553c.4.866.733 1.718.987 2.54 2.23-.627 3.599-1.586 3.599-2.54 0-.956-1.368-1.913-3.599-2.542a20.683 20.683 0 0 1-.987 2.542z"></path>
|
||
<path d="m6.419 8.695-.11-.39c-.826-2.908-.576-4.991.687-5.717 1.235-.715 3.222.13 5.303 2.265l.284.292-.284.291a19.718 19.718 0 0 0-2.02 2.474l-.113.162-.196.016a19.646 19.646 0 0 0-3.157.509l-.394.098zm1.582-5.529c-.224 0-.422.049-.589.145-.828.477-.974 2.138-.404 4.38.891-.197 1.79-.338 2.696-.417a21.058 21.058 0 0 1 1.713-2.123c-1.303-1.267-2.533-1.985-3.416-1.985zm7.997 16.984c-1.188 0-2.714-.896-4.298-2.522l-.283-.291.283-.29a19.827 19.827 0 0 0 2.021-2.477l.112-.16.194-.019a19.473 19.473 0 0 0 3.158-.507l.395-.1.111.391c.822 2.906.573 4.992-.688 5.718a1.978 1.978 0 0 1-1.005.257zm-3.415-2.82c1.302 1.267 2.533 1.986 3.415 1.986.225 0 .423-.05.589-.145.829-.478.976-2.142.404-4.384-.89.198-1.79.34-2.698.419a20.526 20.526 0 0 1-1.71 2.124z"></path>
|
||
<path d="m17.58 8.695-.395-.099a19.477 19.477 0 0 0-3.158-.509l-.194-.017-.112-.162A19.551 19.551 0 0 0 11.7 5.434l-.283-.291.283-.29c2.08-2.134 4.066-2.979 5.303-2.265 1.262.727 1.513 2.81.688 5.717l-.111.39zm-3.287-1.421c.954.085 1.858.228 2.698.417.571-2.242.425-3.903-.404-4.381-.824-.477-2.375.253-4.004 1.841.616.67 1.188 1.378 1.71 2.123zM8.001 20.15a1.983 1.983 0 0 1-1.005-.257c-1.263-.726-1.513-2.811-.688-5.718l.108-.391.395.1c.964.243 2.026.414 3.158.507l.194.019.113.16c.604.878 1.28 1.707 2.02 2.477l.284.29-.284.291c-1.583 1.627-3.109 2.522-4.295 2.522zm-.993-5.362c-.57 2.242-.424 3.906.404 4.384.825.47 2.371-.255 4.005-1.842a21.17 21.17 0 0 1-1.713-2.123 20.692 20.692 0 0 1-2.696-.419z"></path>
|
||
<path d="M12 15.313c-.687 0-1.392-.029-2.1-.088l-.196-.017-.113-.162a25.697 25.697 0 0 1-1.126-1.769 26.028 26.028 0 0 1-.971-1.859l-.084-.177.084-.179c.299-.632.622-1.252.971-1.858.347-.596.726-1.192 1.126-1.77l.113-.16.196-.018a25.148 25.148 0 0 1 4.198 0l.194.019.113.16a25.136 25.136 0 0 1 2.1 3.628l.083.179-.083.177a24.742 24.742 0 0 1-2.1 3.628l-.113.162-.194.017c-.706.057-1.412.087-2.098.087zm-1.834-.904c1.235.093 2.433.093 3.667 0a24.469 24.469 0 0 0 1.832-3.168 23.916 23.916 0 0 0-1.832-3.168 23.877 23.877 0 0 0-3.667 0 23.743 23.743 0 0 0-1.832 3.168 24.82 24.82 0 0 0 1.832 3.168z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#react-备忘清单"><span class="icon icon-link"></span></a>React 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://npmjs.org/package/react"><img src="https://img.shields.io/npm/v/react.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/react"><img src="https://img.shields.io/npm/dm/react.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/facebook/react/network/dependents"><img src="https://badgen.net/github/dependents-repo/facebook/react" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/facebook/react"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">适合初学者的综合 React 备忘清单</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#快速创建-react-项目-cra">快速创建 React 项目 (CRA)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#导入多个导出">导入多个导出</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#react-组件中的-css">React 组件中的 CSS</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性">属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#children">Children</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#state">State</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#class-中的-state">Class 中的 State</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#循环">循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件监听">事件监听</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数注入">函数注入</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#嵌套">嵌套</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#portals">Portals</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fragment">Fragment</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#返回字符串">返回字符串</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#返回数组">返回数组</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#refs-转发">Refs 转发</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用">使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-组件内部使用-ref-属性">Class 组件内部使用 ref 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件内部使用-ref-属性">函数组件内部使用 ref 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#严格模式-strictmode">严格模式 StrictMode</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#profiler">Profiler</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#onrender-回调函数">onRender 回调函数</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#默认值">默认值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-组件默认-props">Class 组件默认 props</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用-1">使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-组件默认-state">Class 组件默认 state</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件默认-props">函数组件默认 props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件默认-state">函数组件默认 state</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#props">Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#props-的-spread-运算符">Props 的 Spread 运算符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#什么是-props">什么是 Props？</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#将-pros-传递给组件">将 Pros 传递给组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#解构-props">解构 props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#访问功能组件中的-props">访问功能组件中的 Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-pros-进行条件渲染">使用 Pros 进行条件渲染</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#prop-drilling属性传递">Prop Drilling（属性传递）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#props-与-state">Props 与 State</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#默认-props">默认 props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-prop-处理事件">使用 prop 处理事件</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#jsx">JSX</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍-1">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-点语法">JSX 点语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-element">JSX Element</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-属性">JSX 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-表达式">JSX 表达式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-style">JSX style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-dangerouslysetinnerhtml">JSX dangerouslySetInnerHTML</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-htmlfor">JSX htmlFor</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-defaultvalue">JSX defaultValue</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-defaultchecked">JSX defaultChecked</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-classname">JSX className</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-条件渲染">JSX 条件渲染</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用-2">使用</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-三目运算符--与运算符-">JSX 三目运算符 / 与运算符 &&</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-组件">JSX 组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-元素变量">JSX 元素变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-注释">JSX 注释</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#组件">组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件">函数组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-组件">Class 组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-组件-api">Class 组件 API</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#额外的-api">额外的 API</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#属性-1">属性</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#实例属性">实例属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#pure-组件">Pure 组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#高阶组件">高阶组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#包含关系">包含关系</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#作为参数传递">作为参数传递</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#嵌入内部组件">嵌入内部组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#嵌入外部组件">嵌入外部组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#点组件语法技巧">点组件语法技巧</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#hooks">Hooks</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hooks-api-参考">Hooks API 参考</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#基础-hook">基础 Hook</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#额外的-hook">额外的 Hook</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#library-hooks">Library Hooks</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数式更新">函数式更新</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#useref">useRef</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#useimperativehandle">useImperativeHandle</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#useeffect">useEffect</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#usecallback">useCallback</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#usememo">useMemo</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#useid">useId</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#usedebugvalue">useDebugValue</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#componentdidmount--componentwillunmount">componentDidMount & componentWillUnmount</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#生命周期">生命周期</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#挂载">挂载</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卸载">卸载</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#过时-api">过时 API</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#更新">更新</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#错误处理">错误处理</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#render">render()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#constructor">constructor()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#static-getderivedstatefromerror">static getDerivedStateFromError()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#componentdidupdate">componentDidUpdate()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#getsnapshotbeforeupdate">getSnapshotBeforeUpdate()</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#proptypes-属性类型检查">PropTypes 属性类型检查</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#proptypes">PropTypes</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#基础">基础</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#枚举-enum">枚举 Enum</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#数组-array">数组 Array</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#对象-object">对象 Object</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#元素-elements">元素 Elements</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#必需的">必需的</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基本类型">基本类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#必需的-1">必需的</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#枚举">枚举</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#元素-elements-1">元素 Elements</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对象-object-1">对象 Object</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自定义验证器">自定义验证器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自定义的-arrayof-或-objectof-验证器">自定义的 arrayOf 或 objectOf 验证器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组">数组</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#验证类的实例">验证类的实例</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<p>React 是一个用于构建用户界面的 JavaScript 库</p>
|
||
<ul>
|
||
<li><a href="https://react.dev">React 官方文档</a> <em>(react.dev)</em></li>
|
||
<li><a href="./styled-components.html">Styled Components 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||
<li><a href="./typescript.html#jsx">TypeScript JSX 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||
</ul>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>createRoot<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/client'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> elm <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token function">createRoot</span><span class="token punctuation">(</span>elm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">root<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<h4 id="快速创建-react-项目-cra"><a aria-hidden="true" tabindex="-1" href="#快速创建-react-项目-cra"><span class="icon icon-link"></span></a>快速创建 <strong>React</strong> 项目 (<a href="https://github.com/facebook/create-react-app">CRA</a>)</h4>
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">npx create-react-app my-app
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="导入多个导出"><a aria-hidden="true" tabindex="-1" href="#导入多个导出"><span class="icon icon-link"></span></a>导入多个导出</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token maybe-class-name">Component</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom'</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">class</span> <span class="token class-name">Hello</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token spread operator">...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">World</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/* ... */</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>export</code> 导出 <strong><code>Hello</code></strong>，<code>export default</code> 导出 <strong><code>World</code></strong> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">World</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Hello</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./hello.js'</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>import</code> 导入 <code>Hello</code> 组件，在示例中使用。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="react-组件中的-css"><a aria-hidden="true" tabindex="-1" href="#react-组件中的-css"><span class="icon icon-link"></span></a>React 组件中的 CSS</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token string">"./Student.css"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>注意：类属性 <code>className</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> divStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundImage</span><span class="token operator">:</span> <span class="token string">'url('</span> <span class="token operator">+</span> imgUrl <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>divStyle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="属性"><a aria-hidden="true" tabindex="-1" href="#属性"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Student</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Julie<span class="token punctuation">"</span></span> <span class="token attr-name">age</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">23</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">pro</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>函数组件 <code>Student</code> 中访问属性</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>Class 组件 <code>Student</code> 中访问属性</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>class</code> 组件使用 <code>this.props</code> 访问传递给组件的属性。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="children"><a aria-hidden="true" tabindex="-1" href="#children"><span class="icon icon-link"></span></a>Children</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AlertBox</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">您有待处理的通知</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">AlertBox</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>函数 <code>AlertBox</code> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">AlertBox</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>Class <code>AlertBox</code> 组件，与函数组件 <code>AlertBox</code> 组件相同</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">AlertBox</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">render</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>children</code> 作为子组件的的属性传递。</p>
|
||
</div></div></div><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="state"><a aria-hidden="true" tabindex="-1" href="#state"><span class="icon icon-link"></span></a>State</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<p>函数中的 State，Hook 是 React 16.8 的新增特性</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">click</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了 </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> 次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>click<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 点击我
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>setState</code> 更新状态，下面是函数组件读取状态</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了 </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> 次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<h4 id="class-中的-state"><a aria-hidden="true" tabindex="-1" href="#class-中的-state"><span class="icon icon-link"></span></a>Class 中的 State</h4>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 确保函数可以访问组件属性（ES2015）</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">click</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">click</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">click</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 点击我
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">}</span><span class="token plain-text">次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>setState</code> 更新状态，<code>class</code> 组件中不能使用 <yel><del>hooks</del></yel>。下面是 <code>class</code> 组件读取状态</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">}</span><span class="token plain-text">次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="循环"><a aria-hidden="true" tabindex="-1" href="#循环"><span class="icon icon-link"></span></a>循环</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> elm <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token string">'three'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>elm<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>key</code> 值在兄弟节点之间必须唯一</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="事件监听"><a aria-hidden="true" tabindex="-1" href="#事件监听"><span class="icon icon-link"></span></a>事件监听</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Hello</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Hello World"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Say Hi
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数注入"><a aria-hidden="true" tabindex="-1" href="#函数注入"><span class="icon icon-link"></span></a>函数注入</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token parameter">x1<span class="token punctuation">,</span> x2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x1 <span class="token operator">+</span> x2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="嵌套"><a aria-hidden="true" tabindex="-1" href="#嵌套"><span class="icon icon-link"></span></a>嵌套</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Avatar</span></span> <span class="token keyword module">from</span> <span class="token string">'./Avatar'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Profile</span></span> <span class="token keyword module">from</span> <span class="token string">'./Profile'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Avatar</span></span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profile</span></span> <span class="token attr-name">username</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="portals"><a aria-hidden="true" tabindex="-1" href="#portals"><span class="icon icon-link"></span></a>Portals</h3><div class="wrap-body">
|
||
<p>React 并_没有_创建一个新的 <code>div</code>。它只是把子元素渲染到 <code>domNode</code> 中。<code>domNode</code> 是一个可以在任何位置的有效 DOM 节点。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createPortal</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> domNode
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="fragment"><a aria-hidden="true" tabindex="-1" href="#fragment"><span class="icon icon-link"></span></a>Fragment</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Fragment</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Avatar</span></span> <span class="token keyword module">from</span> <span class="token string">'./Avatar'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Profile</span></span> <span class="token keyword module">from</span> <span class="token string">'./Profile'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Student</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Avatar</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./demo.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profile</span></span> <span class="token attr-name">username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>从 <code>v16.2.0</code> 开始 <code>Fragment</code> 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <code><></></code> 效果是一样的。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Student</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Avatar</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./demo.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profile</span></span> <span class="token attr-name">username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>查看: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments & strings</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="返回字符串"><a aria-hidden="true" tabindex="-1" href="#返回字符串"><span class="icon icon-link"></span></a>返回字符串</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">return</span> <span class="token string">'Look ma, no spans!'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>您可以只返回一个字符串。查看: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments & strings</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="返回数组"><a aria-hidden="true" tabindex="-1" href="#返回数组"><span class="icon icon-link"></span></a>返回数组</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Student</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">First item</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>B<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Second item</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>不要忘记 <code>key</code>！查看: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments & strings</a></p>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="refs-转发"><a aria-hidden="true" tabindex="-1" href="#refs-转发"><span class="icon icon-link"></span></a>Refs 转发</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">FancyButton</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">forwardRef</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ref</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<h4 id="使用"><a aria-hidden="true" tabindex="-1" href="#使用"><span class="icon icon-link"></span></a>使用</h4>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 你可以直接获取 DOM button 的 ref：</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FancyButton</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 点击我
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">FancyButton</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="class-组件内部使用-ref-属性"><a aria-hidden="true" tabindex="-1" href="#class-组件内部使用-ref-属性"><span class="icon icon-link"></span></a>Class 组件内部使用 ref 属性</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Component</span><span class="token punctuation">,</span>createRef<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">myRef</span> <span class="token operator">=</span> <span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">myRef</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>提示：Refs 适用于类组件，但不适用于函数组件（除非您使用 useRef hook，请参阅<a href="#hooks">hooks</a>）</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数组件内部使用-ref-属性"><a aria-hidden="true" tabindex="-1" href="#函数组件内部使用-ref-属性"><span class="icon icon-link"></span></a>函数组件内部使用 ref 属性</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomTextInput</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 这里必须声明 $input，这样 ref 才可以引用它</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">const</span> $input <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> $input<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>$input<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>聚焦文本输入<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="严格模式-strictmode"><a aria-hidden="true" tabindex="-1" href="#严格模式-strictmode"><span class="icon icon-link"></span></a>严格模式 StrictMode</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Header</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ComponentOne</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ComponentTwo</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.StrictMode</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Footer</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<ul>
|
||
<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles">识别不安全的生命周期</a></li>
|
||
<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage">关于使用过时字符串 ref API 的警告</a></li>
|
||
<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage">关于使用废弃的 findDOMNode 方法的警告</a></li>
|
||
<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects">检测意外的副作用</a></li>
|
||
<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#detecting-legacy-context-api">检测过时的 context API</a></li>
|
||
<li><a href="https://zh-hans.reactjs.org/docs/strict-mode.html#ensuring-reusable-state">确保可复用的状态</a></li>
|
||
</ul>
|
||
<p>突出显示应用程序中潜在问题的工具。请参阅：<a href="https://zh-hans.reactjs.org/docs/strict-mode.html">严格模式</a></p>
|
||
</div></div></div><div class="wrap h3body-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="profiler"><a aria-hidden="true" tabindex="-1" href="#profiler"><span class="icon icon-link"></span></a>Profiler</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>测量一个 React 应用多久渲染一次以及渲染一次的 <code>代价</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profiler</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigation<span class="token punctuation">"</span></span> <span class="token attr-name">onRender</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>callback<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navigation</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Profiler</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>为了分析 <code>Navigation</code> 组件和它的子代。应该在需要时才去使用它。</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>id(string)</code></td><td align="left">发生提交的 <code>Profiler</code> 树的 <code>id</code></td></tr><tr><td align="left"><code>onRender(function)</code></td><td align="left">组件树任何组件 “提交” 一个更新的时候调用这个函数</td></tr></tbody></table>
|
||
<h4 id="onrender-回调函数"><a aria-hidden="true" tabindex="-1" href="#onrender-回调函数"><span class="icon icon-link"></span></a>onRender 回调函数</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>phase: "mount" | "update"</code></td><td align="left">判断是由 <code>props</code>/<code>state</code>/<code>hooks</code> 改变 或 “第一次装载” 引起的重渲染</td></tr><tr><td align="left"><code>actualDuration: number</code></td><td align="left">本次更新在渲染 Profiler 和它的子代上花费的时间</td></tr><tr><td align="left"><code>baseDuration: number</code></td><td align="left">在 Profiler 树中最近一次每一个组件 render 的持续时间</td></tr><tr><td align="left"><code>startTime: number</code></td><td align="left">本次更新中 React 开始渲染的时间戳</td></tr><tr><td align="left"><code>commitTime: number</code></td><td align="left">本次更新中 React commit 阶段结束的时间戳</td></tr><tr><td align="left"><code>interactions: Set</code></td><td align="left">当更新被制定时，“<a href="https://fb.me/react-interaction-tracing">interactions</a>” 的集合会被追踪</td></tr></tbody></table>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="默认值"><a aria-hidden="true" tabindex="-1" href="#默认值"><span class="icon icon-link"></span></a>默认值</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-props"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-props"><span class="icon icon-link"></span></a>Class 组件默认 props</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">CustomButton</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">CustomButton</span><span class="token punctuation">.</span><span class="token property-access">defaultProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<h4 id="使用-1"><a aria-hidden="true" tabindex="-1" href="#使用-1"><span class="icon icon-link"></span></a>使用</h4>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CustomButton</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>不传值 <code>props.color</code> 将自动设置为 <code>blue</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-state"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-state"><span class="icon icon-link"></span></a>Class 组件默认 state</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Hello</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>在构造 <code>constructor()</code>中设置默认状态。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Hello</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数组件默认-props"><a aria-hidden="true" tabindex="-1" href="#函数组件默认-props"><span class="icon icon-link"></span></a>函数组件默认 props</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomButton</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> color <span class="token operator">=</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数组件默认-state"><a aria-hidden="true" tabindex="-1" href="#函数组件默认-state"><span class="icon icon-link"></span></a>函数组件默认 state</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomButton</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>color<span class="token punctuation">,</span> setColor<span class="token punctuation">]</span><span class="token operator">=</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'blue'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="props"><a aria-hidden="true" tabindex="-1" href="#props"><span class="icon icon-link"></span></a>Props</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="props-的-spread-运算符"><a aria-hidden="true" tabindex="-1" href="#props-的-spread-运算符"><span class="icon icon-link"></span></a>Props 的 Spread 运算符</h3><div class="wrap-body">
|
||
<p>扩展运算符可用于一次传递所有 Props。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Profile</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text">, </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">age</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profile</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>user<span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="什么是-props"><a aria-hidden="true" tabindex="-1" href="#什么是-props"><span class="icon icon-link"></span></a>什么是 Props？</h3><div class="wrap-body">
|
||
<ul>
|
||
<li>Props（“properties”的缩写）用于将数据从父组件传递到子组件。</li>
|
||
<li>它们是只读的，不能在子组件内修改。</li>
|
||
</ul>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token attr-name">propName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="将-pros-传递给组件"><a aria-hidden="true" tabindex="-1" href="#将-pros-传递给组件"><span class="icon icon-link"></span></a>将 Pros 传递给组件</h3><div class="wrap-body">
|
||
<p>您可以通过 JSX 中的属性将 props 从父组件传递到子组件。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ParentComponent</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ChildComponent</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>John<span class="token punctuation">"</span></span> <span class="token attr-name">age</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">25</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ChildComponent</span></span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello，</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text">. You are </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">age</span><span class="token punctuation">}</span><span class="token plain-text"> years old. </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="解构-props"><a aria-hidden="true" tabindex="-1" href="#解构-props"><span class="icon icon-link"></span></a>解构 props</h3><div class="wrap-body">
|
||
<p>props 可以解构以便于访问。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="访问功能组件中的-props"><a aria-hidden="true" tabindex="-1" href="#访问功能组件中的-props"><span class="icon icon-link"></span></a>访问功能组件中的 Props</h3><div class="wrap-body">
|
||
<p>可以使用 props 对象在功能组件中访问 Props。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-pros-进行条件渲染"><a aria-hidden="true" tabindex="-1" href="#使用-pros-进行条件渲染"><span class="icon icon-link"></span></a>使用 Pros 进行条件渲染</h3><div class="wrap-body">
|
||
<p>道具可用于组件内部的条件渲染。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> isLoggedIn <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> isLoggedIn <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hl</span><span class="token punctuation">></span></span><span class="token plain-text">Welcome back, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">: </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Please log in</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">;
|
||
</span></span><span class="code-line"><span class="token plain-text">}
|
||
</span></span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="prop-drilling属性传递"><a aria-hidden="true" tabindex="-1" href="#prop-drilling属性传递"><span class="icon icon-link"></span></a>Prop Drilling（属性传递）</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Parent</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"John"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span><span class="token maybe-class-name">Child</span> name<span class="token operator">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Child</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span><span class="token maybe-class-name">Grandchild</span> name<span class="token operator">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Grandchild</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>将属性（props）在多个组件层级中逐层传递可能会变得繁琐。这种方式称为属性传递（prop drilling）。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="props-与-state"><a aria-hidden="true" tabindex="-1" href="#props-与-state"><span class="icon icon-link"></span></a>Props 与 State</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<ul>
|
||
<li><code>props</code> 被传递给组件并且是不可变的。</li>
|
||
<li><code>State</code> 是组件的本地状态，可以更改。</li>
|
||
</ul>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ChildComponent</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token plain-text">Hi,my name is </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token plain-text">.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ParentComponent</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// State to manage the name value</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> ［name<span class="token punctuation">,</span> setName］<span class="token operator">=</span> <span class="token function">usestate</span><span class="token punctuation">(</span><span class="token string">'John'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">changeName</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setName</span><span class="token punctuation">(</span><span class="token string">'Jane'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ChildComponent</span></span> <span class="token attr-name">name</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>changeName<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Change Names
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="默认-props"><a aria-hidden="true" tabindex="-1" href="#默认-props"><span class="icon icon-link"></span></a>默认 props</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">"Bob"</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// Renders "Hello, Bob!"</span>
|
||
</span><span class="code-line"><span class="token operator"><</span> <span class="token maybe-class-name">Greeting</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
</span></code></pre>
|
||
<p>您可以为 <code>props</code> 设置默认值。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-prop-处理事件"><a aria-hidden="true" tabindex="-1" href="#使用-prop-处理事件"><span class="icon icon-link"></span></a>使用 prop 处理事件</h3><div class="wrap-body">
|
||
<p>你可以将事件处理程序作为 props 传递给 handle 用户交互。</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Button</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> onClick <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span> button onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span><span class="token operator">></span><span class="token maybe-class-name">Click</span> me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Button clicked!"</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="jsx"><a aria-hidden="true" tabindex="-1" href="#jsx"><span class="icon icon-link"></span></a>JSX</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="介绍-1"><a aria-hidden="true" tabindex="-1" href="#介绍-1"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p><code>JSX</code> 仅仅只是 <code>React.createElement(component, props, ...children)</code> 函数的语法糖</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyButton</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">shadowSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 点击我
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyButton</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>会编译为</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">MyButton</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token literal-property property">shadowSize</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string">'点击我'</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>没有子节点</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>会编译为</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">'div'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'sidebar'</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-点语法"><a aria-hidden="true" tabindex="-1" href="#jsx-点语法"><span class="icon icon-link"></span></a>JSX 点语法</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Menu</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">);
|
||
</span></span><span class="code-line"><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">Menu.Item = ({ children }) => (
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">);
|
||
</span></span><span class="code-line"><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-element"><a aria-hidden="true" tabindex="-1" href="#jsx-element"><span class="icon icon-link"></span></a>JSX Element</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> emptyHeading <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">root<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>参考：<a href="https://reactjs.org/docs/rendering-elements.html">渲染元素</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-属性"><a aria-hidden="true" tabindex="-1" href="#jsx-属性"><span class="icon icon-link"></span></a>JSX 属性</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> avatarUrl <span class="token operator">=</span> <span class="token string">"img/picture.jpg"</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>avatarUrl<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 点击我
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>注意：类属性 <code>className</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-表达式"><a aria-hidden="true" tabindex="-1" href="#jsx-表达式"><span class="icon icon-link"></span></a>JSX 表达式</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'张三'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Hello, </span><span class="token punctuation">{</span><span class="token function">fullName</span><span class="token punctuation">(</span><span class="token string">'三'</span><span class="token punctuation">,</span> <span class="token string">'张'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-style"><a aria-hidden="true" tabindex="-1" href="#jsx-style"><span class="icon icon-link"></span></a>JSX style</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> divStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundImage</span><span class="token operator">:</span> <span class="token string">'url('</span> <span class="token operator">+</span> imgUrl <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyComponent</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>divStyle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">组件</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-dangerouslysetinnerhtml"><a aria-hidden="true" tabindex="-1" href="#jsx-dangerouslysetinnerhtml"><span class="icon icon-link"></span></a>JSX dangerouslySetInnerHTML</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> markup <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">__html</span><span class="token operator">:</span> <span class="token string">'我 &middot; 你'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">dangerouslySetInnerHTML</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>markup<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>dangerouslySetInnerHTML</code> 是 React 为浏览器 DOM 提供 <code>innerHTML</code> 的替换方案。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-htmlfor"><a aria-hidden="true" tabindex="-1" href="#jsx-htmlfor"><span class="icon icon-link"></span></a>JSX htmlFor</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ab<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>v<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">HTML</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">);
|
||
</span></span></code></pre>
|
||
<p><code>for</code> 在 <code>JS</code> 中是保留字，JSX 元素使用了 <code>htmlFor</code> 代替</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-defaultvalue"><a aria-hidden="true" tabindex="-1" href="#jsx-defaultvalue"><span class="icon icon-link"></span></a>JSX defaultValue</h3><div class="wrap-body">
|
||
<p>非受控组件的属性，设置组件第一次挂载时的 <code>value</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p><code><input></code>、<code><select></code> 和 <code><textarea></code> 支持 value 属性</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-defaultchecked"><a aria-hidden="true" tabindex="-1" href="#jsx-defaultchecked"><span class="icon icon-link"></span></a>JSX defaultChecked</h3><div class="wrap-body">
|
||
<p>非受控组件的属性，设置组件是否被选中</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">defaultChecked</span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>类型为 <code>checkbox</code> 或 <code>radio</code> 时，组件支持 checked 属性</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-classname"><a aria-hidden="true" tabindex="-1" href="#jsx-classname"><span class="icon icon-link"></span></a>JSX className</h3><div class="wrap-body">
|
||
<p>属性用于指定 <code>CSS</code> 的 <code>class</code></p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>React 中使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">Web Components</a> 使用 <code>class</code> 属性代替</p>
|
||
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="jsx-条件渲染"><a aria-hidden="true" tabindex="-1" href="#jsx-条件渲染"><span class="icon icon-link"></span></a>JSX 条件渲染</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">formatName</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> user<span class="token punctuation">.</span><span class="token property-access">firstName</span>
|
||
</span><span class="code-line"> <span class="token operator">+</span> <span class="token string">' '</span>
|
||
</span><span class="code-line"> <span class="token operator">+</span> user<span class="token punctuation">.</span><span class="token property-access">lastName</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">你好, </span><span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">你好, 先生。</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>注意：组件必须总是返回一些东西。</p>
|
||
<h4 id="使用-2"><a aria-hidden="true" tabindex="-1" href="#使用-2"><span class="icon icon-link"></span></a>使用</h4>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Greeting</span></span> <span class="token attr-name">firstName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>三<span class="token punctuation">"</span></span> <span class="token attr-name">lastName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>张<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-三目运算符--与运算符-"><a aria-hidden="true" tabindex="-1" href="#jsx-三目运算符--与运算符-"><span class="icon icon-link"></span></a>JSX 三目运算符 / 与运算符 &&</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Weather</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> props<span class="token punctuation">.</span><span class="token property-access">isLoggedIn</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>isLoggedIn <span class="token operator">?</span> <span class="token string">'已'</span> <span class="token operator">:</span> <span class="token string">'未'</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token plain-text">登录。
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>isShow <span class="token operator">&&</span> <span class="token operator"><</span>div<span class="token operator">></span>内容<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-组件"><a aria-hidden="true" tabindex="-1" href="#jsx-组件"><span class="icon icon-link"></span></a>JSX 组件</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dropdown</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 下拉列表
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单三</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Dropdown</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>组件名称以大驼峰式命名。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-元素变量"><a aria-hidden="true" tabindex="-1" href="#jsx-元素变量"><span class="icon icon-link"></span></a>JSX 元素变量</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> button<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">isLoggedIn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> button <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserGreeting</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> button <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">GuestGreeting</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>button<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="jsx-注释"><a aria-hidden="true" tabindex="-1" href="#jsx-注释"><span class="icon icon-link"></span></a>JSX 注释</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 这里写注释 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="组件"><a aria-hidden="true" tabindex="-1" href="#组件"><span class="icon icon-link"></span></a>组件</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="函数组件"><a aria-hidden="true" tabindex="-1" href="#函数组件"><span class="icon icon-link"></span></a>函数组件</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">UserName</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Kenny</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserName</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>注意：每个组件都需要一个根元素，<a href="https://reactjs.org/docs/components-and-props.html">更多说明</a>。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="class-组件"><a aria-hidden="true" tabindex="-1" href="#class-组件"><span class="icon icon-link"></span></a>Class 组件</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Welcome</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件-api"><a aria-hidden="true" tabindex="-1" href="#class-组件-api"><span class="icon icon-link"></span></a>Class 组件 API</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<h4 id="额外的-api"><a aria-hidden="true" tabindex="-1" href="#额外的-api"><span class="icon icon-link"></span></a>额外的 API</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>this.forceUpdate()</code></td><td>强制重新渲染</td></tr><tr><td align="left"><code>this.setState({ ... })</code></td><td>更新状态</td></tr><tr><td align="left"><code>this.setState(state =>{ ... })</code></td><td>更新状态</td></tr></tbody></table>
|
||
<h4 id="属性-1"><a aria-hidden="true" tabindex="-1" href="#属性-1"><span class="icon icon-link"></span></a>属性</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>defaultProps</code></td><td>默认 props</td></tr><tr><td align="left"><code>displayName</code></td><td>显示组件名称(用于调试)</td></tr></tbody></table>
|
||
<h4 id="实例属性"><a aria-hidden="true" tabindex="-1" href="#实例属性"><span class="icon icon-link"></span></a>实例属性</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>this.props</code></td><td>组件接受参数</td></tr><tr><td align="left"><code>this.state</code></td><td>组件内状态</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="pure-组件"><a aria-hidden="true" tabindex="-1" href="#pure-组件"><span class="icon icon-link"></span></a>Pure 组件</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token maybe-class-name">PureComponent</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MessageBox</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> ···
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="高阶组件"><a aria-hidden="true" tabindex="-1" href="#高阶组件"><span class="icon icon-link"></span></a>高阶组件</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 高阶组件 with</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">with</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token parameter"><span class="token maybe-class-name">WrappedComponent</span></span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> <span class="token maybe-class-name">Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WrappedComponent</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>使用高阶组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">LowComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">MyComp</span> <span class="token operator">=</span> <span class="token keyword">with</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token maybe-class-name">LowComponent</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="包含关系"><a aria-hidden="true" tabindex="-1" href="#包含关系"><span class="icon icon-link"></span></a>包含关系</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">FancyBorder</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'Fancy'</span><span class="token operator">+</span>props<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>组件可以通过 JSX 嵌套</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">WelcomeDialog</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FancyBorder</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">欢迎</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 感谢您访问我们的宇宙飞船
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">FancyBorder</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="作为参数传递"><a aria-hidden="true" tabindex="-1" href="#作为参数传递"><span class="icon icon-link"></span></a>作为参数传递</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SplitPane</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SplitPane<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">left</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">right</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SplitPane</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">left</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Contacts</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">right</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Chat</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>给组件 <code>SplitPane</code> 传递 <code>left</code> 和 <code>right</code> 两个组件参数</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="嵌入内部组件"><a aria-hidden="true" tabindex="-1" href="#嵌入内部组件"><span class="icon icon-link"></span></a>嵌入内部组件</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">UserAvatar</span></span> <span class="token keyword module">from</span> <span class="token string">"./UserAvatar"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>注意：假设 <code>UserAvatar</code> 在 <code>UserAvatar.js</code> 中声明</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="嵌入外部组件"><a aria-hidden="true" tabindex="-1" href="#嵌入外部组件"><span class="icon icon-link"></span></a>嵌入外部组件</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Button</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'uiw'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 主要按钮
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>注意：<a href="http://npmjs.com/uiw">uiw</a> 组件在 <a href="https://www.npmjs.com">npmjs.com</a> 上找到，需要先安装导入</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="点组件语法技巧"><a aria-hidden="true" tabindex="-1" href="#点组件语法技巧"><span class="icon icon-link"></span></a>点组件语法技巧</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Menu</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">);
|
||
</span></span><span class="code-line"><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">Menu.Item = ({ children }) => (
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text">);
|
||
</span></span></code></pre>
|
||
<hr>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="hooks"><a aria-hidden="true" tabindex="-1" href="#hooks"><span class="icon icon-link"></span></a>Hooks</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="hooks-api-参考"><a aria-hidden="true" tabindex="-1" href="#hooks-api-参考"><span class="icon icon-link"></span></a>Hooks API 参考</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<h4 id="基础-hook"><a aria-hidden="true" tabindex="-1" href="#基础-hook"><span class="icon icon-link"></span></a>基础 Hook</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useState</code></td><td>返回一个 <code>state</code>，更新 <code>state</code> 的函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate">#</a></td></tr><tr><td align="left"><code>useEffect</code></td><td>可能有副作用代码的函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect">#</a></td></tr><tr><td align="left"><code>useContext</code></td><td>接收并返回该 <code>context</code> 的当前值 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext">#</a></td></tr></tbody></table>
|
||
<h4 id="额外的-hook"><a aria-hidden="true" tabindex="-1" href="#额外的-hook"><span class="icon icon-link"></span></a>额外的 Hook</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useReducer</code></td><td><code>useState</code> 的替代方案 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate">#</a></td></tr><tr><td align="left"><code>useCallback</code></td><td>返回一个回调函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback">#</a></td></tr><tr><td align="left"><code>useMemo</code></td><td>返回一个 <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> 值<a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo">#</a></td></tr><tr><td align="left"><code>useRef</code></td><td>返回一个可变的 <code>ref</code> 对象 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useref">#</a></td></tr><tr><td align="left"><code>useImperativeHandle</code></td><td>暴露给父组件的实例值 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle">#</a></td></tr><tr><td align="left"><code>useLayoutEffect</code></td><td>DOM 变更后同步调用函数 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect">#</a></td></tr><tr><td align="left"><code>useDebugValue</code></td><td>开发者工具中显示标签 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue">#</a></td></tr><tr><td align="left"><code>useDeferredValue</code></td><td>接受并返回该值的新副本 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usedeferredvalue">#</a></td></tr><tr><td align="left"><code>useTransition</code></td><td>过渡任务的等待状态 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition">#</a></td></tr><tr><td align="left"><code>useId</code></td><td>用于生成唯一 ID <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#useid">#</a></td></tr></tbody></table>
|
||
<h4 id="library-hooks"><a aria-hidden="true" tabindex="-1" href="#library-hooks"><span class="icon icon-link"></span></a>Library Hooks</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>useSyncExternalStore</code></td><td>读取和订阅外部数据源 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore">#</a></td></tr><tr><td align="left"><code>useInsertionEffect</code></td><td>DOM 突变之前 同步触发 <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="函数式更新"><a aria-hidden="true" tabindex="-1" href="#函数式更新"><span class="icon icon-link"></span></a>函数式更新</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Counter</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> initialCount <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>initialCount<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Count: </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>initialCount<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Reset</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token parameter">prevCount</span> <span class="token arrow operator">=></span> prevCount <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">-</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token parameter">prevCount</span> <span class="token arrow operator">=></span> prevCount <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">+</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="useref"><a aria-hidden="true" tabindex="-1" href="#useref"><span class="icon icon-link"></span></a>useRef</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">TextInputWithFocusButton</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> $input <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">onButtonClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> $input<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>$input<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onButtonClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 聚焦输入
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>current</code> 指向已挂载到 DOM 上的文本输入元素</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="useimperativehandle"><a aria-hidden="true" tabindex="-1" href="#useimperativehandle"><span class="icon icon-link"></span></a>useImperativeHandle</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">FancyInput</span></span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ref</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> inputRef <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token function">useImperativeHandle</span><span class="token punctuation">(</span>ref<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">focus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> inputRef<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputRef<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">FancyInput</span> <span class="token operator">=</span> <span class="token function">forwardRef</span><span class="token punctuation">(</span><span class="token maybe-class-name">FancyInput</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>父组件使用</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FancyInput</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputRef<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line">inputRef<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="useeffect"><a aria-hidden="true" tabindex="-1" href="#useeffect"><span class="icon icon-link"></span></a>useEffect</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> subs <span class="token operator">=</span> props<span class="token punctuation">.</span><span class="token property-access">source</span><span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> subs<span class="token punctuation">.</span><span class="token method function property-access">unsubscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>props<span class="token punctuation">.</span><span class="token property-access">source</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="usecallback"><a aria-hidden="true" tabindex="-1" href="#usecallback"><span class="icon icon-link"></span></a>useCallback</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> memoizedCallback <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">doSomething</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="usememo"><a aria-hidden="true" tabindex="-1" href="#usememo"><span class="icon icon-link"></span></a>useMemo</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> memoizedValue <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">computeExpensiveValue</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="useid"><a aria-hidden="true" tabindex="-1" href="#useid"><span class="icon icon-link"></span></a>useId</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Checkbox</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token function">useId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">htmlFor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 你喜欢React吗？
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>用于生成跨服务端和客户端稳定的唯一 <code>ID</code> 的同时避免 <code>hydration</code> 不匹配</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="usedebugvalue"><a aria-hidden="true" tabindex="-1" href="#usedebugvalue"><span class="icon icon-link"></span></a>useDebugValue</h3><div class="wrap-body">
|
||
<pre class="wrap-text "><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">useFriendStatus</span><span class="token punctuation">(</span><span class="token parameter">friendID</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> isOnline<span class="token punctuation">,</span> setIsOnline
|
||
</span><span class="code-line"> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> <span class="token comment">// 在开发者工具中的这个 Hook 旁边显示标签</span>
|
||
</span><span class="code-line"> <span class="token comment">// e.g. "FriendStatus: Online"</span>
|
||
</span><span class="code-line"> <span class="token function">useDebugValue</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> isOnline <span class="token operator">?</span> <span class="token string">'Online'</span> <span class="token operator">:</span> <span class="token string">'Offline'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> isOnline<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<p>不推荐你向每个自定义 <code>Hook</code> 添加 <code>debug</code> 值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="componentdidmount--componentwillunmount"><a aria-hidden="true" tabindex="-1" href="#componentdidmount--componentwillunmount"><span class="icon icon-link"></span></a>componentDidMount & componentWillUnmount</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">useEffect</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// componentDidMount</span>
|
||
</span><span class="code-line"> <span class="token comment">// 组件挂载时，可以在这里完成你的任务</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// componentWillUnmount</span>
|
||
</span><span class="code-line"> <span class="token comment">// 卸载时执行，清除 effect</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>这是一个类似 <code>class</code> 组件中 <code>componentDidMount</code> & <code>componentWillUnmount</code> 两个生命周期函数的写法。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="生命周期"><a aria-hidden="true" tabindex="-1" href="#生命周期"><span class="icon icon-link"></span></a>生命周期</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="挂载"><a aria-hidden="true" tabindex="-1" href="#挂载"><span class="icon icon-link"></span></a>挂载</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>constructor</code> <em>(props)</em></td><td>渲染前 <a href="https://zh-hans.reactjs.org/docs/react-component.html#constructor">#</a></td></tr><tr><td align="left"><code>static getDerivedStateFromProps()</code></td><td>调用 <code>render</code> 方法之前调用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops">#</a></td></tr><tr><td align="left"><code>render()</code></td><td><code>class</code> 组件中唯一必须实现的方法 <a href="https://reactjs.org/docs/react-component.html#render">#</a></td></tr><tr><td align="left"><code>componentDidMount()</code></td><td>在组件挂载后(插入 DOM 树中)立即调用 <a href="https://reactjs.org/docs/react-component.html#componentdidmount">#</a></td></tr><tr><td align="left"><code>UNSAFE_componentWillMount()</code></td><td>在挂载之前被调用，建议使用 <code>constructor()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount">#</a></td></tr></tbody></table>
|
||
<p>在 <code>constructor()</code> 上设置初始状态。在 <code>componentDidMount()</code> 上添加 DOM 事件处理程序、计时器(等），然后在 <code>componentWillUnmount()</code> 上删除它们。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卸载"><a aria-hidden="true" tabindex="-1" href="#卸载"><span class="icon icon-link"></span></a>卸载</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>componentWillUnmount()</code></td><td>在组件卸载及销毁之前直接调用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentwillunmount">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="过时-api"><a aria-hidden="true" tabindex="-1" href="#过时-api"><span class="icon icon-link"></span></a>过时 API</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">过时方法</th><th>新方法</th></tr></thead><tbody><tr><td align="left"><del><code>componentWillMount()</code></del></td><td><code>UNSAFE_componentWillMount()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount">#</a></td></tr><tr><td align="left"><del><code>componentWillReceiveProps()</code></del></td><td><code>UNSAFE_componentWillReceiveProps()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops">#</a></td></tr><tr><td align="left"><del><code>componentWillUpdate()</code></del></td><td><code>UNSAFE_componentWillUpdate()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillupdate">#</a></td></tr></tbody></table>
|
||
<p>17+ 之后不再支持，在 <code>17</code> 版本之后，只有新的 <code>UNSAFE_</code> 生命周期名称可以使用。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="更新"><a aria-hidden="true" tabindex="-1" href="#更新"><span class="icon icon-link"></span></a>更新</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>static getDerivedStateFromProps(props, state)</code></td><td>调用 <code>render</code> 之前调用，在初始挂载及后续更新时都会被调用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops">#</a></td></tr><tr><td align="left"><code>shouldComponentUpdate(nextProps, nextState)</code></td><td>如果返回 <code>false</code>，则跳过 <code>render()</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops">#</a></td></tr><tr><td align="left"><code>render()</code></td><td>在不修改组件 <code>state</code> 的情况下，每次调用时都返回相同的结果 <a href="https://zh-hans.reactjs.org/docs/react-component.html#render">#</a></td></tr><tr><td align="left"><code>getSnapshotBeforeUpdate()</code></td><td>在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置） <a href="https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate">#</a></td></tr><tr><td align="left"><code>componentDidUpdate()</code></td><td>这里使用 <code>setState()</code>，但记得比较 <code>props</code>。首次渲染不会执行此方法 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidupdate">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="错误处理"><a aria-hidden="true" tabindex="-1" href="#错误处理"><span class="icon icon-link"></span></a>错误处理</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>描述</th></tr></thead><tbody><tr><td align="left"><code>static getDerivedStateFromError(error)</code></td><td>后代组件抛出错误后被调用，它将抛出的错误作为参数，并返回一个值以更新 <code>state</code> <a href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror">#</a></td></tr><tr><td align="left"><code>componentDidCatch(error, info)</code></td><td>在后代组件抛出错误后被调用，会在“提交”阶段被调用，因此允许执行副作用 <a href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="render"><a aria-hidden="true" tabindex="-1" href="#render"><span class="icon icon-link"></span></a>render()</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Welcome</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="constructor"><a aria-hidden="true" tabindex="-1" href="#constructor"><span class="icon icon-link"></span></a>constructor()</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 不要在这里调用 this.setState()</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">handleClick</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">handleClick</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="static-getderivedstatefromerror"><a aria-hidden="true" tabindex="-1" href="#static-getderivedstatefromerror"><span class="icon icon-link"></span></a>static getDerivedStateFromError()</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">ErrorBoundary</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"> <span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 更新 state 使下一次渲染可以显降级 UI</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">hasError</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 你可以渲染任何自定义的降级 UI</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Something went wrong.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="componentdidupdate"><a aria-hidden="true" tabindex="-1" href="#componentdidupdate"><span class="icon icon-link"></span></a>componentDidUpdate()</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token function">componentDidUpdate</span><span class="token punctuation">(</span><span class="token parameter">prevProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 典型用法（不要忘记比较 props）：</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">uid</span> <span class="token operator">!==</span> prevProps<span class="token punctuation">.</span><span class="token property-access">uid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">fetchData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">uid</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="getsnapshotbeforeupdate"><a aria-hidden="true" tabindex="-1" href="#getsnapshotbeforeupdate"><span class="icon icon-link"></span></a>getSnapshotBeforeUpdate()</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">getSnapshotBeforeUpdate</span><span class="token punctuation">(</span><span class="token parameter">prevProps<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 我们是否在 list 中添加新的 items ？</span>
|
||
</span><span class="code-line"> <span class="token comment">// 捕获滚动位置以便我们稍后调整滚动位置。</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>prevProps<span class="token punctuation">.</span><span class="token property-access">list</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">list</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">listRef</span><span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> list<span class="token punctuation">.</span><span class="token property-access">scrollHeight</span> <span class="token operator">-</span> list<span class="token punctuation">.</span><span class="token property-access">scrollTop</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="proptypes-属性类型检查"><a aria-hidden="true" tabindex="-1" href="#proptypes-属性类型检查"><span class="icon icon-link"></span></a>PropTypes 属性类型检查</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="proptypes"><a aria-hidden="true" tabindex="-1" href="#proptypes"><span class="icon icon-link"></span></a>PropTypes</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">PropTypes</span></span> <span class="token keyword module">from</span> <span class="token string">'prop-types'</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>any</code></td><td>任意类型</td></tr><tr><td align="left"><code>(props, propName, 组件名称)=>{}</code></td><td>自定义验证器</td></tr></tbody></table>
|
||
<h4 id="基础"><a aria-hidden="true" tabindex="-1" href="#基础"><span class="icon icon-link"></span></a><em>基础</em></h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>string</code></td><td>字符串</td></tr><tr><td align="left"><code>number</code></td><td>数组</td></tr><tr><td align="left"><code>func</code></td><td>函数</td></tr><tr><td align="left"><code>bool</code></td><td>布尔值</td></tr><tr><td align="left"><code>symbol</code></td><td>-</td></tr></tbody></table>
|
||
<h4 id="枚举-enum"><a aria-hidden="true" tabindex="-1" href="#枚举-enum"><span class="icon icon-link"></span></a><em>枚举 Enum</em></h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>oneOf(any)</code></td><td>枚举类型</td></tr><tr><td align="left"><code>oneOfType([type])</code></td><td>几种类型中的任意一个类型</td></tr></tbody></table>
|
||
<h4 id="数组-array"><a aria-hidden="true" tabindex="-1" href="#数组-array"><span class="icon icon-link"></span></a><em>数组 Array</em></h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>array</code></td><td>数组</td></tr><tr><td align="left"><code>arrayOf</code></td><td>数组由某一类型的元素组成</td></tr></tbody></table>
|
||
<h4 id="对象-object"><a aria-hidden="true" tabindex="-1" href="#对象-object"><span class="icon icon-link"></span></a><em>对象 Object</em></h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>object</code></td><td>对象</td></tr><tr><td align="left"><code>objectOf</code></td><td>对象由某一类型的值组成</td></tr><tr><td align="left"><code>instanceOf(...)</code></td><td>类的实例</td></tr><tr><td align="left"><code>shape</code></td><td>对象由特定的类型值组成</td></tr><tr><td align="left"><code>exact</code></td><td>有额外属性警告</td></tr></tbody></table>
|
||
<h4 id="元素-elements"><a aria-hidden="true" tabindex="-1" href="#元素-elements"><span class="icon icon-link"></span></a><em>元素 Elements</em></h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>element</code></td><td>React 元素</td></tr><tr><td align="left"><code>elementType</code></td><td>React 元素类型(即 <code>MyComponent</code>)</td></tr><tr><td align="left"><code>node</code></td><td>DOM 节点</td></tr></tbody></table>
|
||
<h4 id="必需的"><a aria-hidden="true" tabindex="-1" href="#必需的"><span class="icon icon-link"></span></a><em>必需的</em></h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>(···).isRequired</code></td><td>必需的</td></tr></tbody></table>
|
||
<p>请参阅：<a href="https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html">使用 PropTypes 进行类型检查</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="基本类型"><a aria-hidden="true" tabindex="-1" href="#基本类型"><span class="icon icon-link"></span></a>基本类型</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">seats</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">callback</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">func</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">isClosed</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">bool</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">any</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">any</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">symbol</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>你可以将属性声明为 JS 原生类型，默认都是可选的。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="必需的-1"><a aria-hidden="true" tabindex="-1" href="#必需的-1"><span class="icon icon-link"></span></a>必需的</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 确保这个 prop 没有被提供时，会打印警告信息</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">requiredFunc</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">func</span><span class="token punctuation">.</span><span class="token property-access">isRequired</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 任意类型的必需数据</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">requiredAny</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">any</span><span class="token punctuation">.</span><span class="token property-access">isRequired</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>你可以在任何 <code>PropTypes</code> 属性后面加上 <code>isRequired</code>。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="枚举"><a aria-hidden="true" tabindex="-1" href="#枚举"><span class="icon icon-link"></span></a>枚举</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 只能是特定的值，枚举类型。</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">optionalEnum</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">oneOf</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token string">'News'</span><span class="token punctuation">,</span> <span class="token string">'Photos'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 一个对象可以是几种类型中的任意一个类型</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">optionalUnion</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">oneOfType</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">instanceOf</span><span class="token punctuation">(</span><span class="token maybe-class-name">Message</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="元素-elements-1"><a aria-hidden="true" tabindex="-1" href="#元素-elements-1"><span class="icon icon-link"></span></a>元素 Elements</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 任何可被渲染的元素</span>
|
||
</span><span class="code-line"> <span class="token comment">// (包括数字、字符串、元素或数组)</span>
|
||
</span><span class="code-line"> <span class="token comment">// (或 Fragment) 也包含这些类型。</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">node</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">node</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 一个 React 元素。</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">element</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 一个 React 元素类型（即，MyComponent）</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">elementType</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">elementType</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="对象-object-1"><a aria-hidden="true" tabindex="-1" href="#对象-object-1"><span class="icon icon-link"></span></a>对象 Object</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 可以指定一个对象由某一类型的值组成</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">objectOf</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">objectOf</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 可以指定一个对象由特定的类型值组成</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">objectWithShape</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 带有额外属性警告的对象</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">objectWithStrictShape</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">exact</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">string</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">quantity</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义验证器"><a aria-hidden="true" tabindex="-1" href="#自定义验证器"><span class="icon icon-link"></span></a>自定义验证器</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">custom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> propName<span class="token punctuation">,</span> compName</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">matchm</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>props<span class="token punctuation">[</span>propName<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 它在验证失败时应返回一个 Error 对象</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">'无效的prop `'</span>
|
||
</span><span class="code-line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> \`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>propName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\` 提供给</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>
|
||
</span><span class="code-line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> \`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>compName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\`。验证失败。</span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>请不要使用 <code>console.warn</code> 或抛出异常，因为这在 <code>oneOfType</code> 中不会起作用。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="自定义的-arrayof-或-objectof-验证器"><a aria-hidden="true" tabindex="-1" href="#自定义的-arrayof-或-objectof-验证器"><span class="icon icon-link"></span></a>自定义的 <code>arrayOf</code> 或 <code>objectOf</code> 验证器</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">arrayProp</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">arrayOf</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">propValue<span class="token punctuation">,</span> key<span class="token punctuation">,</span> componentName<span class="token punctuation">,</span> <span class="token dom variable">location</span><span class="token punctuation">,</span> propFullName</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">matchme</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>propValue<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 它应该在验证失败时返回一个 Error 对象。</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">'Invalid prop `'</span> <span class="token operator">+</span> propFullName <span class="token operator">+</span> <span class="token string">'` supplied to'</span> <span class="token operator">+</span>
|
||
</span><span class="code-line"> <span class="token string">' `'</span> <span class="token operator">+</span> componentName <span class="token operator">+</span> <span class="token string">'`. Validation failed.'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><code>propValue</code> 是数组或对象本身，<code>key</code> 是他们当前的键。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组"><a aria-hidden="true" tabindex="-1" href="#数组"><span class="icon icon-link"></span></a>数组</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">arr</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">arrayOf</span><span class="token punctuation">(</span><span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token property-access">number</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>可以指定一个数组由某一类型的元素组成</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="验证类的实例"><a aria-hidden="true" tabindex="-1" href="#验证类的实例"><span class="icon icon-link"></span></a>验证类的实例</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">.</span><span class="token property-access">propTypes</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token maybe-class-name">PropTypes</span><span class="token punctuation">.</span><span class="token method function property-access">instanceOf</span><span class="token punctuation">(</span><span class="token maybe-class-name">Message</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>声明 <code>message</code> 为类的实例</p>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://zh-hans.reactjs.org/">React 官方中文文档</a> <em>(zh-hans.reactjs.org)</em></li>
|
||
<li><a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/">反应生命周期方法图</a> <em>(projects.wojtekmaj.pl)</em></li>
|
||
<li><a href="https://reactcheatsheet.com">React 16 Cheat Sheet</a></li>
|
||
<li><a href="https://github.com/enaqx/awesome-react">Awesome React</a> <em>(github.com)</em></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|