forked from RubyLouvre/anu
-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathhooks.html
103 lines (98 loc) · 20.4 KB
/
hooks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html><html lang="zh-CN"><head><meta charSet="UTF-8"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link rel="icon" type="image/png" sizes="32x32" href="../images/titleLogo.png"/><link rel="icon" type="image/png" sizes="16x16" href="../images/titleLogo.png"/><meta name="theme-color" content="#ffffff"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><title>React Hooks的支持-文档</title><link rel="stylesheet" href="../ydoc/styles/style.css"/><meta name="author" content="司徒正美"/><meta name="keywords"/><meta name="description" content="使用Reac微信小程序"/><meta id="releativePath" content=".."/><link rel="stylesheet" href="../ydoc/ydoc-plugin-search/search.css"/><link rel="stylesheet" href="../style/index.css"/></head><body><div class="g-doc"><div class="m-aside"><div class="m-summary" id="js-menu"><div class="m-summary-content" id="js-menu-content"><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="intro.html#" class="href">介绍</a></li><li class="item"><a href="install.html" class="href">安装与使用cli各种命令</a></li><li class="item"><a href="update.html" class="href">升级</a></li><li class="item"><a href="app.html" class="href">全局对象</a></li><li class="item"><a href="lifetimes.html" class="href">页面组件与生命周期</a></li><li class="item"><a href="page2.html" class="href">页面的各个功能讲解</a></li><li class="item"><a href="component.html" class="href">页面上的子组件使用</a></li><li class="item"><a href="standard.html" class="href">小程序组件规范</a></li><li class="item"><a href="jsx.html" class="href">使用 JSX 的注意事项</a></li><li class="item"><a href="style.html" class="href">使用 CSS 的注意事项</a></li><li class="item"><a href="" class="href">React Hooks的支持</a></li><li class="item"><a href="publish.html" class="href">目录结构与输出目录</a></li><li class="item"><a href="import_js.html" class="href">按平台打包代码或样式</a></li><li class="item"><a href="tabBar.html" class="href">据平台设置tabBar</a></li><li class="item"><a href="titleBar.html" class="href">隐藏标题栏</a></li><li class="item"><a href="redux.html" class="href">Redux/Mobx的使用</a></li><li class="item"><a href="webview.html" class="href">智能 webview 化</a></li><li class="item"><a href="customConfig.html" class="href">自定义项目配置</a></li><li class="item"><a href="customBuildConfig.html" class="href">自定义打包配置</a></li><li class="item"><a href="nativeComponents.html" class="href">不转译某些标签名</a></li><li class="item"><a href="chaika.html" class="href">拆库开发</a></li><li class="item"><a href="alias.html" class="href">别名配置</a></li><li class="item"><a href="vscode.html" class="href">vscode插件</a></li><li class="item"><a href="report.html" class="href">日志收集与上传</a></li><li class="item"><a href="npm.html" class="href">npm支持</a></li><li class="item"><a href="wxplugin.html" class="href">微信插件支持</a></li><li class="item"><a href="iconfont.html" class="href">iconfont 支持</a></li><li class="item"><a href="async.html" class="href">async/await 支持</a></li><li class="item"><a href="lesssass.html" class="href">Sass、Less、PostCSS支持</a></li><li class="item"><a href="patchComponent.html" class="href">内置 UI 库</a></li><li class="item"><a href="units.html" class="href">rpx与px互转</a></li><li class="item"><a href="event.html" class="href">事件系统</a></li><li class="item"><a href="size.html" class="href">包大小限制</a></li><li class="item"><a href="subpackages.html" class="href">分包加载</a></li><li class="item"><a href="preload.html" class="href">分包预加载</a></li><li class="item"><a href="debug.html" class="href">真机调试</a></li><li class="item"><a href="bu.html" class="href">百度小程序环境判定</a></li><li class="item"><a href="tt.html" class="href">字节小程序相关</a></li><li class="item"><div class="m-summary-block"><a href="" class="href">快应用相关</a><ul class="m-summary-list indent"><li class="item"><a href="quicklist.html" class="href">快应用的scroll-view兼容</a></li><li class="item"><a href="quickstorage.html" class="href">快应用的同步Storage API兼容</a></li><li class="item"><a href="boxDifferent.html" class="href">快应用与小程序盒子模型的区别</a></li><li class="item"><a href="query.html" class="href">小米快应用获取页面参数</a></li><li class="item"><a href="huaweiQuery.html" class="href">华为快应用获取页面参数</a></li><li class="item"><a href="share.html" class="href">快应用与小程序转发分享</a></li><li class="item"><a href="onblur.html" class="href">快应用onblur</a></li><li class="item"><a href="scene.html" class="href">场景值的兼容</a></li><li class="item"><a href="card.html" class="href">卡片</a></li><li class="item"><a href="movable.html" class="href">movable-area与movable-view的模拟</a></li></ul></div></li><li class="item"><a href="diff.html" class="href">各种小程序的比较</a></li><li class="item"><a href="link.html" class="href">各种小程序的官网</a></li><li class="item"><div class="m-summary-block"><a href="feedback.html" class="href">反馈收集</a><ul class="m-summary-list indent"><li class="item"><a href="two-threaded.html" class="href">微信小程序的双线程架构</a></li></ul></div></li><li class="item"><a href="questions.html" class="href">常见问题</a></li><li class="item"><a href="about.html" class="href">关于</a></li></ul></div></div></div><div class="m-summary-switch" id="js-summary-switch"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="bottom"><g transform="translate(904.92214,-879.1482)"><path d="m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,-55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,-174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,-174.68583 0.6895,0 26.281,25.03215 56.8701,55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864-231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,-104.0616 -231.873,-231.248 z" fill="#fff"></path></g></svg><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="top"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="aaa" fill="#fff" fill-rule="nonzero"><path d="M231.2455,342.502 L0,111.25397 L55.6165,55.62697 C86.2056,25.03212 111.7971,-2.99999998e-05 112.4866,-2.99999998e-05 C113.176,-2.99999998e-05 192.3503,78.60859 288.4293,174.6858 L463.1185,349.3716 L637.8077,174.6858 C733.8867,78.60859 813.060896,-2.99999997e-05 813.750396,-2.99999997e-05 C814.439896,-2.99999997e-05 840.031396,25.03212 870.620496,55.62697 L926.236996,111.25397 L694.9915,342.502 C567.8065,469.6884 463.4636,573.75 463.1185,573.75 C462.7734,573.75 358.4305,469.6884 231.2455,342.502 Z" id="Shape" transform="translate(463.118498, 286.874985) scale(1, -1) translate(-463.118498, -286.874985) "></path></g></g></svg></div></div><div class="m-main" id="js-panel"><header class="m-header" id="js-header"><div class="m-header-title js-logo"><a href="../index.html" target="_self"><img class="logo" width="36" src="../images/logo@2x.png"/></a></div><div><div class="m-search">
<div class="icon"></div>
<input type="text" class="input js-input" placeholder="搜索" />
<div class="m-search-result js-search-result"></div>
</div></div><nav class="m-header-nav js-nav"><ul class="m-header-items"><li class="item active"><a class="href" href="intro.html">文档</a></li><li class="item "><a class="href" href="../apis/index.html">已兼容处理的API</a></li><li class="item "><a class="href" href="logo.html">谁在用nanachi</a></li><li class="item "><a class="href" href="about.html">关于</a></li></ul></nav><div id="js-nav-btn" class="m-header-btn ui-font-ydoc"></div></header><div class="m-content" id="js-content"><div id="markdown-body" class="m-content-container markdown-body"><h1>React Hooks的支持</h1>
<p>从nanachi 1.2.3开始，我们引入对React Hooks的支持。所谓React Hooks，就是在无状态组件的方法体里面添加几个
内置方法，实现只有原有状态组件才能实现的功能。</p>
<ul>
<li>自更新能力（setState，使用useState，它会返回一个数组，一个是新数据，一个是更新数据的方法），</li>
<li>访问context(使用useContext)，</li>
<li>使用更高级的setState设置（useReducer）</li>
<li>更新完的回调（useEffect）</li>
<li>setState的升级版， useCallback</li>
<li>useMemo，取得上次缓存的数据，它可以说是useCallback的另一种形式。</li>
</ul>
<p>目前就支持这6种，其他三种或与ref有关，或与渲染时期有关，对小程序没有什么意思就不支持了。</p>
<p>在开始之前，我们还需要深入理解一下的无状态组件。 有的无状态组件是会返回text, div这些构建界面的标签，它们应该放到
components目录下，有的无状态组件则直接返回另一个组件或props.children，那么应该放到common目录下，比如<code><React.Fragment /></code>或var ThemeContext = React.createContext(); <code><ThemeContext.Provider /></code></p>
<p>注意：由于小程序的语法限制，无法实现props render, 因此也无法使用Context.Consumer，你只能用useContext或static contextType</p>
<p>下面是一个简单的例子：</p>
<p>我们用nanachi建立一个hello world模块（最后那个），改写pages/index/index.js</p>
<pre><code class="language-javascript"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'@react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>GlobalTheme<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@common/GlobalTheme/index'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'@components/Layout/index'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> AnotherComponent <span class="token keyword">from</span> <span class="token string">'@components/AnotherComponent/index'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'./index.scss'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">P</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>
props <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">anyVar</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'red'</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// eslint-disable-next-line</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'page did mount!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">'page'</span> <span class="token operator">></span>
<span class="token operator"><</span>GlobalTheme<span class="token punctuation">.</span>Provider value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>anyVar<span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>Layout<span class="token operator">></span>
<span class="token operator"><</span>AnotherComponent <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>GlobalTheme<span class="token punctuation">.</span>Provider<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 class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token constant">P</span><span class="token punctuation">;</span>
</code></pre>
<p>common/GlobalTheme/index.js</p>
<pre><code class="language-javascript"><span class="token comment">// eslint-disable-next-line</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'@react'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> GlobalTheme <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//它要表示为一个组件，因此必须 大写开头</span>
</code></pre>
<p>components/AnotherComponent/index</p>
<pre><code class="language-javascript"><span class="token comment">// eslint-disable-next-line</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'@react'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">AnotherComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token comment">//它要表示为一个组件，因此必须 大写开头</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"AnotherComponent init"</span> <span class="token punctuation">)</span> <span class="token comment">//debug</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span> Foo <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<p>components/Layout/index</p>
<pre><code class="language-javascript"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'@react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>GlobalTheme<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@common/GlobalTheme/index'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Layout</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> globalStyle <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useContext</span><span class="token punctuation">(</span>GlobalTheme<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Layout init"</span><span class="token punctuation">,</span>globalStyle <span class="token punctuation">)</span> <span class="token comment">//debug</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span>globalStyle<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="m-content-container m-paging"><div class="m-paging-prev m-paging-item"><a href="style.html" class="href"><span class="ui-font-ydoc"></span>使用 CSS 的注意事项</a></div><div class="m-paging-next m-paging-item"><a href="publish.html" class="href">目录结构与输出目录<span class="ui-font-ydoc"></span></a></div></div></div></div></div><div></div><script>
var $content = document.getElementById('js-content');
var $summaryItems = Array.prototype.slice.call(document.querySelectorAll('#js-menu .href'));
var $menu = document.getElementById('js-menu');
if (sessionStorage.prevPathname) {
sessionStorage.setItem('prevPrevPathname', sessionStorage.prevPathname);
sessionStorage.setItem('prevPrevMenuScrollTop', sessionStorage.prevMenuScrollTop);
sessionStorage.setItem('prevPrevContentScrollTop', sessionStorage.prevContentScrollTop);
}
if (sessionStorage.locationPathname) {
sessionStorage.setItem('prevPathname', sessionStorage.locationPathname);
sessionStorage.setItem('prevMenuScrollTop', sessionStorage.menuScrollTop);
sessionStorage.setItem('prevContentScrollTop', sessionStorage.contentScrollTop);
}
if ($menu && sessionStorage.menuScrollTop) {
$menu.scrollTop = sessionStorage.menuScrollTop;
}
// 刷新页面但不切换 pathname 的时候，内容区恢复到记忆的高度
if ($content && sessionStorage.contentScrollTop && window.location.pathname == sessionStorage.locationPathname) {
$content.scrollTop = sessionStorage.contentScrollTop;
} else if (sessionStorage.prevPrevPathname && sessionStorage.prevPrevPathname === window.location.pathname) {
if ($menu && sessionStorage.prevPrevMenuScrollTop) {
$menu.scrollTop = sessionStorage.prevPrevMenuScrollTop;
}
if ($content && sessionStorage.prevPrevContentScrollTop) {
$content.scrollTop = sessionStorage.prevPrevContentScrollTop;
}
}
sessionStorage.setItem('locationPathname', window.location.pathname);
</script><script src="../ydoc/scripts/plugins/dollar.min.js"></script><script src="../ydoc/scripts/plugins/responsive-nav.min.js"></script><script src="../ydoc/scripts/plugins/slideout.min.js"></script><script src="../ydoc/scripts/app.js"></script><script src="../ydoc/ydoc-plugin-search/core.js"></script><script src="../ydoc/ydoc-plugin-search/search.js"></script><script src="../search_json.js"></script></body></html>