{"id":1318,"date":"2023-03-18T11:28:19","date_gmt":"2023-03-18T03:28:19","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1318"},"modified":"2023-04-29T09:12:48","modified_gmt":"2023-04-29T01:12:48","slug":"taro-basic-tutorial-react","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/18\/taro-basic-tutorial-react\/","title":{"rendered":"Taro\u57fa\u7840\u6559\u7a0b\u4e4bReact"},"content":{"rendered":"

\u5728Taro<\/code>\u53ef\u4ee5\u901a\u8fc7import * as React from 'react'<\/code>\u6765\u4f7f\u7528React<\/code>\uff0cJSX<\/code>\u8bed\u6cd5\u6ca1\u6709\u4efb\u4f55\u9650\u5236\uff0c\u4f46\u548c\u5728\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528React<\/code>\u4f9d\u7136\u6709\u4e00\u4e9b\u4e0d\u540c\uff0c\u5177\u4f53\u4f53\u73b0\u5728\uff1a<\/p>\n

\u53c2\u8003\uff1ahttps:\/\/taro-docs.jd.com\/taro\/docs\/react\/<\/a><\/p>\n

\u5165\u53e3\u7ec4\u4ef6<\/h2>\n

<\/p>\n

\u6bcf\u4e00\u4e2aTaro<\/code>\u5e94\u7528\u90fd\u9700\u8981\u4e00\u4e2a\u5165\u53e3\u7ec4\u4ef6\u7528\u6765\u6ce8\u518c\u5e94\u7528\uff0c\u5165\u53e3\u6587\u4ef6\u9ed8\u8ba4\u662fsrc<\/code>\u76ee\u5f55\u4e0b\u7684app.js<\/code>\uff0c\u5728Taro<\/code>\u4e2d\u4f7f\u7528React<\/code>\uff0c\u5165\u53e3\u7ec4\u4ef6\u5fc5\u987b\u5bfc\u51fa\u4e00\u4e2aReact<\/code>\u7ec4\u4ef6\uff0c\u5728\u5165\u53e3\u7ec4\u4ef6\u4e2d\u6211\u4eec\u53ef\u4ee5\u8bbe\u7f6e\u5168\u5c40\u72b6\u6001\u6216\u8bbf\u95ee\u5c0f\u7a0b\u5e8f\u5165\u53e3\u5b9e\u4f8b\u7684\u751f\u547d\u5468\u671f\uff1a<\/p>\n

import React, { Component } from 'react'\n\/\/ \u5047\u8bbe\u6211\u4eec\u8981\u4f7f\u7528 Redux\nimport { Provider } from 'react-redux'\n\nimport configStore from '.\/store'\n\nimport '.\/app.css'\n\nconst store = configStore()\n\nclass App extends Component {\n  componentDidMount () {}\n\n  \/\/ \u5bf9\u5e94 onShow\n  componentDidShow () {}\n\n  \/\/ \u5bf9\u5e94 onHide\n  componentDidHide () {}\n\n  \/\/ \u5bf9\u5e94 onError\n  componentDidCatchError () {}\n\n  render () {\n    \/\/ \u5728\u5165\u53e3\u7ec4\u4ef6\u4e0d\u4f1a\u6e32\u67d3\u4efb\u4f55\u5185\u5bb9\uff0c\u4f46\u6211\u4eec\u53ef\u4ee5\u5728\u8fd9\u91cc\u505a\u7c7b\u4f3c\u4e8e\u72b6\u6001\u7ba1\u7406\u7684\u4e8b\u60c5\n    return (\n      <Provider store={store}>\n        {this.props.children} \/* this.props.children \u662f\u5c06\u8981\u88ab\u6e32\u67d3\u7684\u9875\u9762 *\/\n      <\/Provider>\n    )\n  }\n}\n\nexport default App<\/code><\/pre>\n
\u5bf9\u4e8e\u4e00\u4e2a\u5165\u53e3\u6587\u4ef6(\u4f8b\u5982app.jsx<\/code>)\u800c\u8a00\uff0c\u6211\u4eec\u53ef\u4ee5\u65b0\u589e\u4e00\u4e2aapp.config.js<\/code>\u7684\u6587\u4ef6\u8fdb\u884c\u5168\u5c40\u914d\u7f6e\uff0capp.config.js<\/code>\u7684\u9ed8\u8ba4\u5bfc\u51fa\u5c31\u662f\u5168\u5c40\u914d\u7f6e\uff0c\u914d\u7f6e\u89c4\u8303\u57fa\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u5168\u5c40\u914d\u7f6e\u8fdb\u884c\u5236\u5b9a\uff0c\u6240\u6709\u5e73\u53f0\u8fdb\u884c\u7edf\u4e00:<\/p>\n
\/\/ app.config.js\nexport default {\n  pages: [\n    'pages\/index\/index'\n  ],\n  window: {\n    backgroundTextStyle: 'light',\n    navigationBarBackgroundColor: '#fff',\n    navigationBarTitleText: 'WeChat',\n    navigationBarTextStyle: 'black'\n  }\n}<\/code><\/pre>\n
\u7ec4\u4ef6\u751f\u547d\u5468\u671f<\/h3>\n
onLaunch(options)<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94app<\/code>\u7684onLaunch<\/code><\/p>\n
\u5728\u6b64\u751f\u547d\u5468\u671f\u4e2d\u901a\u8fc7getCurrentInstance().router.params<\/code>\uff0c\u53ef\u4ee5\u8bbf\u95ee\u5230\u7a0b\u5e8f\u521d\u59cb\u5316\u53c2\u6570\u3002<\/p>\n
componentWillMount()<\/h4>\n
\u76d1\u542c\u7a0b\u5e8f\u521d\u59cb\u5316\uff0c\u521d\u59cb\u5316\u5b8c\u6210\u65f6\u89e6\u53d1\uff08\u5168\u5c40\u53ea\u89e6\u53d1\u4e00\u6b21\uff09<\/p>\n
componentDidMount()<\/h4>\n
\u9875\u9762\u521d\u6b21\u6e32\u67d3\u5b8c\u6210\u65f6\u89e6\u53d1\uff0c\u4e00\u4e2a\u9875\u9762\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u4ee3\u8868\u9875\u9762\u5df2\u7ecf\u51c6\u5907\u59a5\u5f53\uff0c\u53ef\u4ee5\u548c\u89c6\u56fe\u5c42\u8fdb\u884c\u4ea4\u4e92\u3002\u6b64\u751f\u547d\u5468\u671f\u53ef\u4ee5\u8bbf\u95eegetCurrentInstance().router<\/code>\u3002\u6b64\u751f\u547d\u5468\u671f\u53ef\u4ee5\u8bbf\u95eeTaro DOM<\/code>\u5e76\u4e14\u66f4\u6539DOM<\/code>\u6216\u6dfb\u52a0\u4e8b\u4ef6\uff0c\u4f46\u65e0\u6cd5\u901a\u8fc7Taro.createSelectorQuery<\/code>\u67e5\u627e\u5c0f\u7a0b\u5e8fDOM<\/code>\u3002<\/p>\n
componentDidShow(options)<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onShow<\/code>\uff0c\u5728 H5\/RN \u4e2d\u540c\u6b65\u5b9e\u73b0<\/p>\n
\u7a0b\u5e8f\u542f\u52a8\uff0c\u6216\u4ece\u540e\u53f0\u8fdb\u5165\u524d\u53f0\u663e\u793a\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onAppShow<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
\u5728\u6b64\u751f\u547d\u5468\u671f\u4e2d\u901a\u8fc7getCurrentInstance().router.params<\/code>\uff0c\u53ef\u4ee5\u8bbf\u95ee\u5230\u7a0b\u5e8f\u521d\u59cb\u5316\u53c2\u6570<\/p>\n
\u53c2\u6570\u4e0ecomponentWillMount<\/code>\u4e2d\u83b7\u53d6\u7684\u57fa\u672c\u4e00\u81f4\uff0c\u4f46\u767e\u5ea6\u5c0f\u7a0b\u5e8f\u4e2d\u8865\u5145entryType<\/code>\u548cappURL<\/code>\u4e24\u4e2a\u53c2\u6570<\/p>\n
componentDidHide()<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onHide<\/code>\uff0c\u5728H5\/RN<\/code>\u4e2d\u540c\u6b65\u5b9e\u73b0<\/p>\n
\u7a0b\u5e8f\u4ece\u524d\u53f0\u8fdb\u5165\u540e\u53f0\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onAppHide<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
componentDidCatchError(String error)<\/h4>\n
\u5728\u5fae\u4fe1\/\u767e\u5ea6\/\u5b57\u8282\u8df3\u52a8\/\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onError<\/code>\uff0cH5\/RN<\/code>\u4e2d\u5c1a\u672a\u5b9e\u73b0<\/p>\n
\u7a0b\u5e8f\u53d1\u751f\u811a\u672c\u9519\u8bef\u6216 API \u8c03\u7528\u62a5\u9519\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onError<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
componentDidNotFound(Object)<\/h4>\n
\u5728\u5fae\u4fe1\/\u5b57\u8282\u8df3\u52a8\u5c0f\u7a0b\u5e8f\u4e2d\u8fd9\u4e00\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5bf9\u5e94onPageNotFound<\/code>\uff0c\u5176\u4ed6\u7aef\u5c1a\u672a\u5b9e\u73b0<\/p>\n
\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u57fa\u7840\u5e93 1.9.90 \u5f00\u59cb\u652f\u6301<\/p>\n
\u7a0b\u5e8f\u8981\u6253\u5f00\u7684\u9875\u9762\u4e0d\u5b58\u5728\u65f6\u89e6\u53d1\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4e5f\u53ef\u4ee5\u4f7f\u7528Taro.onPageNotFound<\/code>\u7ed1\u5b9a\u76d1\u542c<\/p>\n
\u9875\u9762\u7ec4\u4ef6<\/h2>\n
\u6bcf\u4e00\u4e2aTaro<\/code>\u5e94\u7528\u90fd\u81f3\u5c11\u5305\u62ec\u4e00\u4e2a\u9875\u9762\u7ec4\u4ef6\uff0c\u9875\u9762\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7Taro<\/code>\u8def\u7531\u8fdb\u884c\u8df3\u8f6c\uff0c\u4e5f\u53ef\u4ee5\u8bbf\u95ee\u5c0f\u7a0b\u5e8f\u9875\u9762\u7684\u751f\u547d\u5468\u671f\uff1a<\/p>\n
import React, { Component } from 'react'\nimport { View, Button, Text } from '@tarojs\/components'\n\nclass Index extends Component {\n\n  config = {\n    navigationBarTitleText: '\u9996\u9875'\n  }\n\n  \/\/ \u5bf9\u5e94 onShow\n  componentDidShow () { }\n\n  \/\/ \u5bf9\u5e94 onHide\n  componentDidHide () { }\n\n  \/\/ \u5bf9\u5e94 onPullDownRefresh\uff0c\u9664\u4e86 componentDidShow\/componentDidHide \u4e4b\u5916\uff0c\n  \/\/ \u6240\u6709\u9875\u9762\u751f\u547d\u5468\u671f\u51fd\u6570\u540d\u90fd\u4e0e\u5c0f\u7a0b\u5e8f\u76f8\u5bf9\u5e94\n  onPullDownRefresh () {\n  },\n\n  \/\/ \u5bf9\u5e94 onPullDownRefresh\n  onReachBottom () {\n  },\n\n  componentWillUnmount () { }\n\n  render () {\n    return (\n      <View className='index'>\n      <\/View>\n    )\n  }\n}\n\nexport default Index<\/code><\/pre>\n
\u914d\u7f6e\u6587\u4ef6<\/h3>\n
\u548c\u5165\u53e3\u7ec4\u4ef6\u4e00\u6837\uff0c\u5bf9\u4e8e\u4e00\u4e2a\u9875\u9762\u6587\u4ef6(\u4f8b\u5982.\/pages\/index\/index.jsx<\/code>)\u800c\u8a00\uff0c\u6211\u4eec\u53ef\u4ee5\u65b0\u589e\u4e00\u4e2a.\/pages\/index\/index.config.js<\/code>\u7684\u6587\u4ef6\u8fdb\u884c\u9875\u9762\u914d\u7f6e\uff0cindex.config.js<\/code>\u7684\u9ed8\u8ba4\u5bfc\u51fa\u5c31\u662f\u9875\u9762\u914d\u7f6e\uff1a<\/p>\n
\/\/ .\/pages\/index\/index.jsx\nexport default {\n  navigationBarTitleText: '\u9996\u9875'\n}<\/code><\/pre>\n
\u751f\u547d\u5468\u671f<\/h3>\n
onReady()<\/h4>\n
\u9875\u9762\u9996\u6b21\u6e32\u67d3\u5b8c\u6bd5\u65f6\u6267\u884c\uff0c\u6b64\u751f\u547d\u5468\u671f\u5728\u5c0f\u7a0b\u5e8f\u7aef\u5bf9\u5e94\u5c0f\u7a0b\u5e8f\u9875\u9762\u7684onReady<\/code>\u751f\u547d\u5468\u671f\u3002\u4ece\u6b64\u751f\u547d\u5468\u671f\u5f00\u59cb\u53ef\u4ee5\u4f7f\u7528createCanvasContext<\/code>\u6216createselectorquery<\/code>\u7b49 API \u8bbf\u95ee\u771f\u5b9e DOM\u3002<\/p>\n
\u5728\u975e\u9875\u9762\u7ec4\u4ef6\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528Taro<\/code>\u5185\u7f6e\u7684 \u6d88\u606f\u673a\u5236<\/a> \u8bbf\u95ee\u9875\u9762\u7ec4\u4ef6\u7684onReady()<\/code>\u751f\u547d\u5468\u671f\uff1a<\/p>\n
import { eventCenter, getCurrentInstance } from '@tarojs\/taro'\nclass Test extends React.Component {\n  componentDidMount () {\n    eventCenter.once(getCurrentInstance().router.onReady, () => {\n      const query = Taro.createSelectorQuery()\n      query.select('#only').boundingClientRect()\n      query.exec(res => {\n        console.log(res, 'res')\n      })\n      console.log('onReady')\n    })\n  }\n\n  render () {\n    return (\n      <View id="only">\n      <\/View>\n    )\n  }\n}<\/code><\/pre>\n
onLoad(options)<\/h4>\n
\u9875\u9762\u521b\u5efa\u65f6\u6267\u884c\uff0c\u6b64\u751f\u547d\u5468\u671f\u5728\u5c0f\u7a0b\u5e8f\u7aef\u5bf9\u5e94\u5c0f\u7a0b\u5e8f\u9875\u9762\u7684onLoad<\/code>\u751f\u547d\u5468\u671f\u3002\u6b64\u751f\u547d\u5468\u671f\u53ef\u4ee5\u8bbf\u95eegetCurrentInstance().router<\/code>\u3002<\/p>\n
componentWillMount()<\/h4>\n
\u9875\u9762\u52a0\u8f7d\u65f6\u89e6\u53d1\uff0c\u4e00\u4e2a\u9875\u9762\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u6b64\u65f6\u9875\u9762 DOM \u5c1a\u672a\u51c6\u5907\u597d\uff0c\u8fd8\u4e0d\u80fd\u548c\u89c6\u56fe\u5c42\u8fdb\u884c\u4ea4\u4e92<\/p>\n
componentDidMount()<\/h4>\n
\u9875\u9762\u521d\u6b21\u6e32\u67d3\u5b8c\u6210\u65f6\u89e6\u53d1\uff0c\u4e00\u4e2a\u9875\u9762\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u4ee3\u8868\u9875\u9762\u5df2\u7ecf\u51c6\u5907\u59a5\u5f53\uff0c\u53ef\u4ee5\u548c\u89c6\u56fe\u5c42\u8fdb\u884c\u4ea4\u4e92\u3002\u6b64\u751f\u547d\u5468\u671f\u53ef\u4ee5\u8bbf\u95eegetCurrentInstance().router<\/code>\u3002\u6b64\u751f\u547d\u5468\u671f\u53ef\u4ee5\u8bbf\u95ee Taro DOM \u5e76\u4e14\u66f4\u6539 DOM \u6216\u6dfb\u52a0\u4e8b\u4ef6\uff0c\u4f46\u65e0\u6cd5\u901a\u8fc7Taro.createSelectorQuery<\/code>\u67e5\u627e\u5c0f\u7a0b\u5e8f DOM\u3002<\/p>\n
shouldComponentUpdate(nextProps, nextState)<\/h4>\n
\u9875\u9762\u662f\u5426\u9700\u8981\u66f4\u65b0\uff0c\u8fd4\u56defalse<\/code>\u4e0d\u7ee7\u7eed\u66f4\u65b0\uff0c\u5426\u5219\u7ee7\u7eed\u8d70\u66f4\u65b0\u6d41\u7a0b<\/p>\n
componentWillUpdate(nextProps, nextState)<\/h4>\n
\u9875\u9762\u5373\u5c06\u66f4\u65b0<\/p>\n
componentDidUpdate(prevProps, prevState)<\/h4>\n
\u9875\u9762\u66f4\u65b0\u5b8c\u6bd5<\/p>\n
componentWillUnmount()<\/h4>\n
\u9875\u9762\u5378\u8f7d\u65f6\u89e6\u53d1\uff0c\u5982redirectTo<\/code>\u6216navigateBack<\/code>\u5230\u5176\u4ed6\u9875\u9762\u65f6<\/p>\n
componentDidShow()<\/h4>\n
\u9875\u9762\u663e\u793a\/\u5207\u5165\u524d\u53f0\u65f6\u89e6\u53d1<\/p>\n
componentDidHide()<\/h4>\n
\u9875\u9762\u9690\u85cf\/\u5207\u5165\u540e\u53f0\u65f6\u89e6\u53d1\uff0c \u5982navigateTo<\/code>\u6216\u5e95\u90e8tab<\/code>\u5207\u6362\u5230\u5176\u4ed6\u9875\u9762\uff0c\u5c0f\u7a0b\u5e8f\u5207\u5165\u540e\u53f0\u7b49<\/p>\n
\u5728\u4ee5\u4e0a\u6240\u6709\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5\u4e2d\uff0c\u90fd\u53ef\u4ee5\u901a\u8fc7getCurrentInstance().router.params<\/code>\u83b7\u53d6\u6253\u5f00\u5f53\u524d\u9875\u9762\u8def\u5f84\u4e2d\u7684\u53c2\u6570\u3002<\/p>\n
\u9875\u9762\u4e8b\u4ef6\u5904\u7406\u51fd\u6570<\/h3>\n
\u5728\u5c0f\u7a0b\u5e8f\u4e2d\uff0c\u9875\u9762\u8fd8\u6709\u5728\u4e00\u4e9b\u4e13\u5c5e\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u5982\u4e0b<\/p>\n
onPullDownRefresh()<\/h4>\n
\u76d1\u542c\u7528\u6237\u4e0b\u62c9\u5237\u65b0\u4e8b\u4ef6<\/p>\n