![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815100007-689f0527e4dc8.png\")
<\/p>\n\u4e00\u3001\u9879\u76ee\u7684\u521b\u5efa<\/p>\n
1\u3001create-react-app\u642d\u5efa\u9879\u76ee\u6d41\u7a0b<\/p>\n
2\u3001vite\u521b\u5efa\u9879\u76ee\u6d41\u7a0b<\/p>\n
3\u3001\u9879\u76ee\u76ee\u5f55\u7b80\u4ecb<\/p>\n
4\u3001\u81ea\u52a8\u5f15\u5165<\/p>\n
5\u3001\u6a21\u5757\u5316\u6837\u5f0f<\/p>\n
1\u3001.module.css<\/p>\n
2\u3001\u9884\u5904\u7406\u5668<\/p>\n
3\u3001css-in-js\u5e93<\/p>\n
\u4e8c\u3001\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f<\/p>\n
1\u3001\u5e38\u7528\u751f\u547d\u5468\u671f\u51fd\u6570\u7b80\u4ecb<\/p>\n
2\u3001\u5e38\u7528\u751f\u547d\u5468\u671f\u7684\u6267\u884c\u987a\u5e8f<\/p>\n
3\u3001\u4e0d\u5e38\u7528\u751f\u547d\u5468\u671f\u7b80\u4ecb<\/p>\n
\u4e09\u3001PureComponent<\/p>\n
\u56db\u3001Context<\/p>\n
1\u3001\u521b\u5efacontext<\/p>\n
2\u3001\u63d0\u4f9bcontext\u00a0<\/p>\n
3\u3001\u6d88\u8d39context<\/p>\n
4\u3001\u591a\u4e2acontext\u5d4c\u5957<\/p>\n
\u4e94\u3001\u9ad8\u9636\u7ec4\u4ef6<\/p>\n
1\u3001\u8ba4\u8bc6\u9ad8\u9636\u7ec4\u4ef6<\/p>\n
2\u3001HOC\u4f20\u9012\u5c5e\u6027<\/p>\n
3\u3001\u5c0f\u6848\u4f8b<\/p>\n
\u516d\u3001\u76f8\u5173\u9762\u8bd5\u9898<\/p>\n
1\u3001React\u751f\u547d\u5468\u671f<\/p>\n
2\u3001React\u7ec4\u4ef6\u7684\u4f20\u503c\u65b9\u5f0f<\/p>\n
3\u3001\u8de8\u57df<\/p>\n
4\u3001React Vue\u6837\u5f0f\u9694\u79bb\u5b9e\u73b0<\/p>\n
create-react-app\u662f\u5b98\u65b9\u652f\u6301\u7684\u521b\u5efareact\u5355\u9875\u5e94\u7528\u7a0b\u5e8f\u7684\u811a\u624b\u67b6,\u4f7f\u7528\u8fd9\u4e2a\u811a\u624b\u67b6\u7684\u524d\u63d0\u662f\u8981\u786e\u4fdd\u4f60\u7535\u8111\u5b89\u88c5\u7684node\u7248\u672c\u572814\u4ee5\u4e0a,npm\u7248\u672c\u57285.6\u4ee5\u4e0a<\/p>\n
\u5b89\u88c5\u811a\u624b\u67b6<\/p>\n
\u65b9\u5f0f\u4e00<\/p>\n
\/\/\u5168\u5c40\u5b89\u88c5
\nnpm i -g create-react-app
\n\/\/\u5229\u7528\u811a\u624b\u67b6\u521b\u5efa\u9879\u76ee
\ncreate-react-app my-project <\/p>\n
\u65b9\u5f0f\u4e8c<\/p>\n
\u4f7f\u7528npx\u8fdb\u884c\u5b89\u88c5,npx\u662fnpm 5.2\u7248\u672c\u65b0\u589e\u7684\u4e00\u4e2a\u5de5\u5177\u5305,\u4e3anpm\u5305\u7684\u6267\u884c\u8005,\u76f8\u6bd4npm,npx\u4f1a\u81ea\u52a8\u5b89\u88c5\u4f9d\u8d56\u5305\u5e76\u6267\u884c\u67d0\u4e2a\u547d\u4ee4\u3002\u4f8b: \u6211\u4eec\u901a\u5e38\u4f7f\u7528\u811a\u624b\u67b6\u521b\u5efa\u9879\u76ee\u65f6,\u6211\u4eec\u8981\u5148\u5b89\u88c5\u811a\u624b\u67b6,\u624d\u80fd\u4f7f\u7528\u811a\u624b\u67b6\u6267\u884c\u547d\u4ee4\u8fdb\u884c\u9879\u76ee\u521b\u5efa,\u800cnpx\u53ef\u4ee5\u5e2e\u6211\u4eec\u7701\u7565\u5b89\u88c5\u811a\u624b\u67b6\u8fd9\u4e00\u6b65<\/p>\n
npx create-react-app my-project
\n\/\/\u8fdb\u5165\u6211\u4eec\u521b\u5efa\u7684\u9879\u76ee
\ncd my-project <\/p>\n
\u6ce8:\u9879\u76ee\u540d\u4e0d\u80fd\u5305\u542b\u5927\u5199\u5b57\u6bcd,\u4f7f\u7528npx\u9700\u8981node\u7248\u672c\u4e3a22\u4ee5\u4e0a<\/p>\n
\u4f7f\u7528vite\u811a\u624b\u67b6\u521b\u5efa\u9879\u76ee,vite\u9700\u8981node\u7248\u672c\u572818\u4ee5\u4e0a<\/p>\n
npm create vite@latest <\/p>\n
\u5b89\u88c5\u9879\u76ee\u4f9d\u8d56\u5305<\/p>\n
npm i <\/p>\n
node_modules:\u9879\u76ee\u7684\u6838\u5fc3\u6a21\u5757,\u4f9d\u8d56\u5305<\/p>\n
public:\u5b58\u653e\u9759\u6001\u8d44\u6e90\u6587\u4ef6<\/p>\n
\u00a0 \u00a0 \u00a0 .ico:\u9875\u7b7e\u7684logo<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0index.html:\u552f\u4e00\u7684\u9875\u9762\u6587\u4ef6,\u53ea\u63d0\u4f9b\u6839\u8282\u70b9<\/p>\n
\u00a0 \u00a0 \u00a0 manifest.json:\u79fb\u52a8\u7aef\u914d\u7f6e\u6587\u4ef6<\/p>\n
\u00a0 \u00a0 \u00a0 robots.txt:\u544a\u8bc9\u722c\u866b\u8005,\u4e0d\u53ef\u722c\u7684\u9875\u9762,\u6ca1\u6709\u5b9e\u8d28\u4f5c\u7528\u53ea\u662f\u8b66\u544a<\/p>\n
.gitignore:\u58f0\u660e\u4e00\u4e9b\u5728git\u4e0a\u4f20\u65f6\u9700\u8981\u5ffd\u7565\u7684\u6587\u4ef6<\/p>\n
package.json:\u9879\u76ee\u7684\u8bf4\u660e\u6587\u4ef6,\u6709\u54ea\u4e9b\u4f9d\u8d56,\u4f9d\u8d56\u4e86\u54ea\u4e2a\u7248\u672c<\/p>\n
package-lock.json:\u9879\u76ee\u4f9d\u8d56\u7684\u5b89\u88c5\u5305,\u4e00\u4e9b\u7248\u672c\u4e0d\u4f1a\u505a\u4e00\u4e9b\u9650\u5236,\u8fdb\u884c\u7248\u672c\u9501\u5b9a<\/p>\n
Readme.md:\u9879\u76ee\u7684\u8bf4\u660e\u6587\u4ef6<\/p>\n
src\u76ee\u5f55<\/p>\n
\u00a0 \u00a0 App.css:App\u7ec4\u4ef6\u7684\u6837\u5f0f\u6587\u4ef6<\/p>\n
\u00a0 \u00a0App.js:\u9879\u76ee\u7684\u6839\u7ec4\u4ef6<\/p>\n
\u00a0 \u00a0App.test.js:\u81ea\u52a8\u5316\u6d4b\u8bd5\u6587\u4ef6<\/p>\n
\u00a0 \u00a0index.css:\u5168\u5c40\u6837\u5f0f\u6587\u4ef6<\/p>\n
\u00a0 \u00a0index.js:\u9879\u76ee\u7684\u5165\u53e3\u6587\u4ef6,html\u53ea\u4f1a\u52a0\u8f7d\u8fd9\u4e2ajs\u6587\u4ef6<\/p>\n
\u00a0 reportWebVitals.js:\u8c37\u6b4c\u63a8\u51fa\u7684\u6d4f\u89c8\u5668\u6027\u80fd\u4f18\u5316\u7684\u5e93<\/p>\n
\u00a0setupTests:\u9488\u5bf9index.js\u7684\u5355\u5143\u6d4b\u8bd5\u539f\u4ef6<\/p>\n
\u6ce8: index.js\u91cc\u7684React.StrictMode,\u5b83\u53ef\u4ee5\u8bc6\u522b\u4e00\u4e9b\u4e0d\u5b89\u5168\u7684\u751f\u547d\u5468\u671f,\u68c0\u6d4b\u610f\u5916\u7684\u526f\u4f5c\u7528\u548c\u8fc7\u65f6\u7684api<\/p>\n
\u5728\u9879\u76ee\u4e2d\u7ec4\u4ef6\u7684\u540e\u7f00\u540d\u6700\u597d\u7528jsx\/tsx\u8868\u793a\u4e00\u4e2a\u7ec4\u4ef6,\u5982\u679c\u662f\u666e\u901ajs\/ts\u540e\u7f00\u5c31\u7528js\/ts<\/p>\n
\u9ed8\u8ba4\u5f15\u5165:jsx\u5728\u5f15\u5165\u7684\u65f6\u5019\u53ef\u4ee5\u4e0d\u52a0\u6587\u4ef6\u540e\u7f00,\u7f16\u8f91\u5668\u4f1a\u81ea\u52a8\u67e5\u627e.jsx\u540e\u7f00\u7684\u6587\u4ef6,\u8981\u662f\u627e\u4e0d\u5230\u7684\u8bdd,\u4f1a\u81ea\u52a8\u67e5\u627e\u540e\u7f00\u4e3a.js\u7684\u6587\u4ef6\u3002\u5982\u679c\u76f4\u63a5\u5f15\u5165\u7684\u662f\u6587\u4ef6\u5939\u7684\u540d\u5b57,\u9ed8\u8ba4\u67e5\u627e\u8be5\u6587\u4ef6\u5939\u4e0b\u7684jsx\u6587\u4ef6<\/p>\n
react\u4e2d\u60f3\u5b9e\u73b0\u6a21\u5757\u5316\u6837\u5f0f,\u6211\u4eec\u53ea\u9700\u8981\u5c06\u6837\u5f0f\u7684\u6587\u4ef6\u540d\u6539\u4e3a:\u6587\u4ef6\u540d.module.css\u5373\u53ef<\/p>\n
import title from ".\/App.module.css"
\nfunction App() {
\n return <>
\n <p className={title.title}>567<\/p>
\n <\/>
\n}<\/p>\n
export default App <\/p>\n
<\/p>\n
\u539f\u7406:CSSModules\u5141\u8bb8\u901a\u8fc7\u81ea\u52a8\u521b\u5efa[filename]_[classname]_[hash]\u683c\u5f0f\u7684\u552f\u4e00classname\u6765\u786e\u5b9acss\u7684\u4f5c\u7528\u57df<\/p>\n
css\u7684\u9884\u5904\u7406\u5668\u6709sass\u3001less\u3001stylus,\u5728\u9879\u76ee\u4e2d\u6211\u4f7f\u7528\u7684\u662fsass,\u6240\u4ee5\u8fd9\u91cc\u6211\u5c31\u4ee5sass\u4e3a\u4f8b<\/p>\n
\u5148\u5728\u9879\u76ee\u4e2d\u5b89\u88c5sass<\/p>\n
npm i sass
\n\/\/App.scss
\n.content {
\n .title {
\n color: aqua;
\n }
\n}
\n\/\/App.jsx
\nimport ".\/App.scss"
\nfunction App() {
\n return <>
\n <div className="content">
\n <p className="title">567<\/p>
\n <\/div>
\n <\/>
\n}<\/p>\n
export default App<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815100008-689f052882171.png\")
<\/p>\n
\u6211\u4eec\u8fd8\u53ef\u4ee5\u4f7f\u7528js\u7f16\u5199\u7684css\u5e93,\u5982styled-components\u3001emotion\u7b49,\u8fd9\u79cd\u65b9\u5f0f\u5b9e\u73b0\u6837\u5f0f\u6a21\u5757\u5316\u4e86\u89e3\u5373\u53ef<\/p>\n
import styled from "styled-components"
\nconst StyleCss=styled.div`
\ncolor:red;
\nfont-size:20px
\n`
\nfunction App() {
\n return <>
\n <StyleCss>
\n \u6211\u662freact
\n <\/StyleCss>
\n <\/>
\n}
\nexport default App <\/p>\n
\u751f\u547d\u5468\u671f\u63cf\u8ff0\u4e86\u7ec4\u4ef6\u4ece\u521b\u5efa\u5230\u9500\u6bc1\u7684\u6574\u4e2a\u8fc7\u7a0b\u4e2d\u4e0d\u540c\u9636\u6bb5\u8c03\u7528\u7684\u65b9\u6cd5,\u6211\u4eec\u53ef\u4ee5\u7b80\u5355\u7406\u89e3\u4e3a\u5230\u7279\u5b9a\u65f6\u95f4\u8282\u70b9\u6267\u884c\u7684\u51fd\u6570<\/p>\n
\u6ce8:\u51fd\u6570\u7ec4\u4ef6\u662f\u7eaf\u51fd\u6570,\u6ca1\u6709\u751f\u547d\u5468\u671f,\u4f46\u662f\u51fd\u6570\u7ec4\u4ef6\u53ef\u4ee5\u4f7f\u7528useEffect\u6765\u6a21\u62df\u751f\u547d\u5468\u671f(\u540e\u9762\u7684\u6587\u7ae0\u4f1a\u8bb2\u5230)<\/p>\n
\u6ce8:react16.3\u7248\u672c\u524d\u540e\u751f\u547d\u5468\u671f\u4e0d\u540c,react16.3\u7248\u672c\u540e\u5e9f\u9664\u4e86\u4e00\u4e9b\u751f\u547d\u5468\u671f\u51fd\u6570,\u53c8\u589e\u52a0\u4e86\u4e00\u4e9b,\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u8bb2\u89e3react16.3\u7248\u672c\u7684\u751f\u547d\u5468\u671f\u51fd\u6570<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815100009-689f05290fc3d.jpg\")
<\/p>\n
\n
(1)\u6302\u8f7d\u9636\u6bb5:\u7ec4\u4ef6\u88ab\u521b\u5efa\u5e76\u63d2\u5165\u5230dom\u4e2d<\/p>\n
constructor:\u7ec4\u4ef6\u5b9e\u4f8b\u5316\u65f6\u8c03\u7528,\u521d\u59cb\u5316\u72b6\u6001\u548c\u7ed1\u5b9a\u4e8b\u4ef6\u65b9\u6cd5,\u4e5f\u5c31\u662f\u7ed9this.state\u8d4b\u503c\u5bf9\u8c61\u6765\u521d\u59cb\u5316\u5185\u90e8\u7684state,\u4e3a\u4e8b\u4ef6\u7ed1\u5b9a\u5b9e\u4f8b（this)<\/p>\n
render:\u6e32\u67d3\u7ec4\u4ef6\u7684\u65b9\u6cd5<\/p>\n
componentDidMount:\u7ec4\u4ef6\u6302\u8f7d\u5b8c\u6210\u540e\u8c03\u7528,\u6b64\u65f6,\u7ec4\u4ef6\u5df2\u7ecf\u63d2\u5165\u5230dom\u6811\u4e2d\u4e86,\u53ef\u4ee5\u7528\u4e8e\u6267\u884c\u7f51\u7edc\u8bf7\u6c42,\u8ba2\u9605,\u624b\u52a8\u64cd\u4f5cdom<\/p>\n
(2)\u66f4\u65b0\u9636\u6bb5<\/p>\n
componentDidUpdate:\u4f1a\u5728\u66f4\u65b0\u540e\u4f1a\u88ab\u7acb\u5373\u8c03\u7528，\u9996\u6b21\u6e32\u67d3\u4e0d\u4f1a\u6267\u884c\u6b64\u65b9\u6cd5,\u5f53\u66f4\u6539\u4e86state\u6570\u636e,\u7ec4\u4ef6\u63a5\u6536\u65b0\u5c5e\u6027,\u4f1a\u6267\u884c\u8be5\u751f\u547d\u5468\u671f<\/p>\n
(3)\u5378\u8f7d\u9636\u6bb5<\/p>\n
componentWillUnmount:\u7ec4\u4ef6\u5378\u8f7d\u4e4b\u524d\u8c03\u7528,\u7528\u4e8e\u6e05\u9664\u5b9a\u65f6\u5668,\u53d6\u6d88\u7f51\u7edc\u8bf7\u6c42\u7b49\u7b49<\/p>\n
\u8fd9\u91cc\u53ea\u4ecb\u7ecd\u5e38\u7528\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u7684\u6267\u884c\u987a\u5e8f<\/p>\n
\u5e38\u7528\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50:constructor,render,componentDidMount,componentDidUpdate,componentWillUnmount<\/p>\n
\/\/\u7236\u7ec4\u4ef6
\n const content = document.querySelector(".title")
\n const root = ReactDOM.createRoot(content)
\n class App extends React.Component {
\n constructor() {
\n super()
\n console.log("Father-constructor")
\n this.state = {
\n msg: "\u6211\u662f\u7236\u7ec4\u4ef6"
\n }
\n }
\n fn=()=>{
\n this.setState({
\n msg:'\u5b50\u7ec4\u4ef6\u7684\u6570\u636e'
\n })
\n }
\n componentDidMount() {
\n console.log("Father-componentDidMount")
\n }
\n componentDidUpdate() {
\n console.log("Father-componentDidUpdate")
\n }
\n componentWillUnmount(){
\n }
\n render() {
\n console.log("Father-render")
\n const { msg } = this.state
\n return <>
\n <Child msg={msg} \/>
\n <button onClick={this.fn}>\u6309\u94ae<\/button>
\n <\/>
\n }
\n }
\n\/\/\u5b50\u7ec4\u4ef6
\n class Child extends React.Component {
\n constructor() {
\n console.log("child-constructor")
\n super()
\n this.state = {
\n info: "\u6211\u662f\u5b50\u7ec4\u4ef6"
\n }
\n }
\n componentDidUpdate() {
\n console.log("child-componentDidMount")
\n }
\n componentDidMount() {
\n console.log("child-componentDidMount")
\n }
\n render() {
\n console.log("child-render")
\n const { msg } = this.props
\n return <>
\n <p>{msg}<\/p>
\n <\/>
\n }
\n }
\n root.render(<>
\n <App \/>
\n <\/>) <\/p>\n
\u63a7\u5236\u53f0\u6253\u5370\u7684\u7ed3\u679c:<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250815100011-689f052bca016.png\")
<\/h3>\n\u6302\u8f7d\u9636\u6bb5<\/p>\n
getDerivedStateFromProps(nextProps,nextState):\u5728\u6e32\u67d3\u4e4b\u524d\u8c03\u7528,\u6839\u636eprops\u6765\u66f4\u65b0state,\u65e0\u8bba\u662f\u5426\u521d\u59cb\u6e32\u67d3\u8fd8\u662f\u66f4\u65b0\u540e\u90fd\u4f1a\u89e6\u53d1,\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\u66f4\u65b0state,\u8fd4\u56denull\u8868\u793a\u4e0d\u9700\u8981\u66f4\u65b0<\/p>\n
\u66f4\u65b0\u9636\u6bb5<\/p>\n
\u66f4\u65b0\u9636\u6bb5\u4e5f\u8c03\u7528getDerivedStateFromProps(nextProps,nextState),\u4e0e\u6302\u8f7d\u9636\u6bb5\u4f5c\u7528\u76f8\u540c<\/p>\n
shouldComponentUpdate(nextProps,nextState):\u6027\u80fd\u4f18\u5316\u7684\u751f\u547d\u5468\u671f\u51fd\u6570,\u662f\u5728\u7ec4\u4ef6\u66f4\u65b0\u4e4b\u524d\u89e6\u53d1\u7684\u751f\u547d\u5468\u671f\u51fd\u6570,\u8fd4\u56de\u4e00\u4e2a\u5e03\u5c14\u503c,\u51b3\u5b9a\u7ec4\u4ef6\u7684\u8f93\u51fa\u662f\u5426\u53d7\u5f53\u524d\u72b6\u6001\u6216\u5c5e\u6027\u7684\u6539\u53d8\u5f71\u54cd\u800c\u66f4\u65b0,\u9ed8\u8ba4\u8fd4\u56detrue,false\u5219\u4e0d\u4f1a\u66f4\u65b0\u7ec4\u4ef6<\/p>\n
\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528shouldComponentUpdate?<\/p>\n
setState\u5b58\u5728\u4e24\u4e2a\u4e0d\u5408\u7406\u7684\u95ee\u9898:(1)\u65e0\u8bba\u662f\u5426\u66f4\u65b0\u4e86state,render\u51fd\u6570\u90fd\u4f1a\u91cd\u65b0\u8c03\u7528<\/p>\n
(2)\u7236\u7ec4\u4ef6\u66f4\u65b0\u4e86,\u5c31\u7b97\u5b50\u7ec4\u4ef6\u6ca1\u6709\u7528\u5230\u7236\u7ec4\u4ef6\u7684\u6570\u636e\u4e5f\u4f1a\u91cd\u65b0\u6e32\u67d3\u5b50\u7ec4\u4ef6<\/p>\n
state\u5224\u65ad\u5f53\u524d\u7ec4\u4ef6\u4e5f\u5c31\u662f\u7236\u7ec4\u4ef6\u662f\u5426\u8981\u66f4\u65b0,props\u5224\u65ad\u5b50\u7ec4\u4ef6\u662f\u5426\u8981\u66f4\u65b0<\/p>\n
\/\/\u7236\u7ec4\u4ef6
\nshouldComponentUpdate(nextState, nextProps) {
\n if (nextState.msg === this.state.msg) {
\n return false
\n } else {
\n return true
\n }
\n }
\n \/\/\u5b50\u7ec4\u4ef6
\nshouldComponentUpdate(nextState, nextProps) {
\n \/\/fatherData\u7236\u7ec4\u4ef6\u4f20\u6765\u7684\u6570\u636e
\n if (nextprops.fatherData=== this.props.fatherData) {
\n return false
\n } else {
\n return true
\n }
\n } <\/p>\n
getSnapshotBeforeUpdate():\u6700\u540e\u4e00\u6b21\u6e32\u67d3\u8f93\u51fa\u540e\u8c03\u7528,dom\u66f4\u65b0\u4e4b\u524d\u8c03\u7528,\u7528\u6765\u6355\u83b7\u4e00\u4e9b\u4fe1\u606f<\/p>\n
\u5728React16.3\u7248\u672c\u540e\u5e9f\u9664\u4e86shouldComponentUpdate()\u56e0\u4e3a\u5b83\u8fdb\u884c\u6027\u80fd\u4f18\u5316\u8981\u5224\u65ad\u4e24\u6b21state\u6216props\u662f\u5426\u4e00\u81f4,\u4e00\u4e2a\u5c5e\u6027\u8fd8\u597d,\u8981\u662f\u6709\u591a\u4e2a\u5c5e\u6027\u5c31\u6bd4\u8f83\u9ebb\u70e6<\/p>\n
PureComponent\u662freact\u7c7b\u7ec4\u4ef6\u4e2d\u7528\u4e8e\u6027\u80fd\u4f18\u5316\u7684\u4e00\u4e2a\u5185\u7f6e\u57fa\u7c7b,\u5b83\u5185\u90e8\u81ea\u52a8\u5b9e\u73b0\u4e86\u4e00\u4e2ashouldComponentUpdate()\u751f\u547d\u5468\u671f\u65b9\u6cd5<\/p>\n
class App React.PureComponent{} <\/p>\n
\u6ce8:PureComponent\u5bf9\u4e8e\u5bf9\u8c61\u5c5e\u6027\u7684\u8bdd\u53ea\u80fd\u8fdb\u884c\u6d45\u5c42\u6bd4\u8f83,\u5bf9\u5bf9\u8c61\u7684\u5730\u5740\u8fdb\u884c\u5224\u65ad\u3002\u5982\u679c\u5bf9\u8c61\u5305\u542b\u590d\u6742\u7684\u6570\u636e\u7ed3\u6784,\u6709\u53ef\u80fd\u56e0\u4e3a\u65e0\u6cd5\u68c0\u67e5\u5230\u6df1\u5c42\u7684\u5dee\u522b,\u4ea7\u751f\u9519\u8bef\u7684\u6bd4\u5bf9\u7ed3\u679c,\u6240\u4ee5\u53ea\u80fd\u5728\u4f60\u7684props\u548cstate\u6bd4\u8f83\u7b80\u5355\u7684\u65f6\u5019,\u53ef\u4ee5\u4f7f\u7528PureComponent,\u6216\u8005\u5728\u6df1\u5c42\u6570\u636e\u7ed3\u6784\u53d1\u751f\u53d8\u5316\u65f6\u8c03\u7528forceUpdate()\u6765\u786e\u4fdd\u7ec4\u4ef6\u88ab\u6b63\u786e\u7684\u66f4\u65b0<\/p>\n
\u6211\u4eec\u4f20\u7edf\u7684\u8de8\u7ec4\u4ef6\u901a\u4fe1\u7684\u65b9\u5f0f\u662f\u901a\u8fc7props\u5c42\u5c42\u4f20\u9012,\u8fd9\u79cd\u65b9\u5f0f\u6bd4\u8f83\u9ebb\u70e6,\u53ef\u4ee5\u4f7f\u7528context\u8fdb\u884c\u8de8\u7ec4\u4ef6\u901a\u4fe1,\u907f\u514d\u9010\u5c42\u4f20\u9012props<\/p>\n
\u521b\u5efa\u4e00\u4e2acontext.js\u6587\u4ef6<\/p>\n
\/\/context.js
\nimport React from "react";
\nconst myContext=React.createContext("")
\nexport default myContext <\/p>\n
\u4f7f\u7528Context\u5bf9\u8c61\u7684provider\u7ec4\u4ef6\u5305\u88f9\u9700\u8981\u63a5\u6536\u6570\u636e\u7684\u5b50\u7ec4\u4ef6<\/p>\n
\u7c7b\u7ec4\u4ef6<\/p>\n
\/\/\u6211\u662f\u7236\u7ec4\u4ef6
\nimport React from "react";
\nimport MyContext from ".\/context"
\nimport Child from ".\/child"
\nclass App extends React.PureComponent {
\n state={
\n msg:"\u6211\u662f\u7236\u7ec4\u4ef6\u6570\u636e"
\n }
\n render(){
\n const {msg}=this.state
\n return<MyContext.Provider value={msg}>
\n <h1>\u6211\u662f\u7236\u7ec4\u4ef6<\/h1>
\n <Child\/>
\n <\/MyContext.Provider>
\n }
\n}
\nexport default App<\/p>\n
\u51fd\u6570\u7ec4\u4ef6<\/p>\n
\/\/\u6211\u662f\u7236\u7ec4\u4ef6
\nimport React from "react";
\nimport MyContext from ".\/context"
\nimport Child from ".\/child"
\nfunction App() {
\n return<MyContext.Provider value="\u6211\u662f\u7236\u7ec4\u4ef6\u6570\u636e">
\n <h1>\u6211\u662f\u7236\u7ec4\u4ef6<\/h1>
\n <Child\/>
\n <\/MyContext.Provider><\/p>\n
}
\nexport default App <\/p>\n
\u5728\u5b50\u7ec4\u4ef6\u4e2d\u901a\u8fc7context\u5bf9\u8c61\u7684consumer\u7ec4\u4ef6\u6216useContext Hook\u6765\u83b7\u53d6\u6570\u636e<\/p>\n
\u6ce8:Context.Consumer\u9002\u7528\u4e8e\u7c7b\u7ec4\u4ef6\u548c\u51fd\u6570\u7ec4\u4ef6,useContext()\u9002\u7528\u4e8e\u51fd\u6570\u7ec4\u4ef6<\/p>\n
\u7c7b\u7ec4\u4ef6<\/p>\n
\u4f7f\u7528Context.Consumer\u6d88\u8d39\u6570\u636e<\/p>\n
\u513f\u5b50\u7ec4\u4ef6<\/p>\n
\/\/\u513f\u5b50\u7ec4\u4ef6
\nimport MyContext from ".\/context";
\nimport React from "react";
\nimport GrandChild from ".\/grandChild";
\nclass Child extends React.PureComponent {
\n render() {
\n return <MyContext.Consumer>
\n {
\n value => <>
\n <h1>\u6211\u662f\u5b50\u7ec4\u4ef6{value}<\/h1>
\n <GrandChild\/>
\n <\/>
\n }
\n <\/MyContext.Consumer>
\n }
\n}
\nexport default Child <\/p>\n
\u5b59\u5b50\u7ec4\u4ef6<\/p>\n
\/\/\u5b59\u5b50\u7ec4\u4ef6
\nimport MyContext from ".\/context";
\nimport React from "react";
\nclass GrandChild extends React.PureComponent {
\n render(){
\n return<MyContext.Consumer>
\n {
\n value=><>
\n <h1>\u6211\u662f\u5b50\u7ec4\u4ef6{value}<\/h1><\/>
\n }
\n <\/MyContext.Consumer>
\n }
\n}
\nexport default GrandChild <\/p>\n
\u4f7f\u7528Class.contextType\u6d88\u8d39\u6570\u636e<\/p>\n
\u901a\u8fc7Class.contextType\u76f4\u63a5\u5c06context\u5bf9\u8c61\u6302\u8f7d\u5230class\u7684contextType\u7684\u5c5e\u6027,\u53ef\u4ee5\u4f7f\u7528this.context\u5bf9context\u5bf9\u8c61\u8fdb\u884c\u4f7f\u7528<\/p>\n
\u5199\u6cd5\u4e00<\/p>\n
\u5c06contextType\u5c5e\u6027\u5199\u5728\u7c7b\u7ec4\u4ef6\u7684\u5916\u9762<\/p>\n
\/\/\u5b59\u5b50\u7ec4\u4ef6
\nimport MyContext from ".\/context";
\nimport React from "react";
\nclass GrandChild extends React.PureComponent {
\n render(){
\n return <h1>\u6211\u662f\u5b50\u7ec4\u4ef6{this.context}<\/h1><\/>
\n }
\n}
\nGrandChild.contextType=MyContext
\nexport default GrandChild <\/p>\n
\u5199\u6cd5\u4e8c<\/p>\n
\u5229\u7528Es6static\u9759\u6001\u5c5e\u6027<\/p>\n
\/\/\u5b59\u5b50\u7ec4\u4ef6
\nimport MyContext from ".\/context";
\nimport React from "react";
\nclass GrandChild extends React.PureComponent {
\nstatic contextType=MyContext
\n render(){
\n return <h1>\u6211\u662f\u5b50\u7ec4\u4ef6{this.context}<\/h1><\/>
\n }
\n}
\nexport default GrandChild <\/p>\n
\u6ce8:contextType\u662f\u7c7b\u7684\u5c5e\u6027\u4e0d\u662f\u7c7b\u7684\u5b9e\u4f8b,\u6240\u4ee5\u5c06contextType\u5199\u5728\u7c7b\u7684\u5916\u9762,\u6216\u8005\u4f7f\u7528es6\u4e2d\u7c7b\u7684\u9759\u6001\u5c5e\u6027\u5c06contextType\u5199\u5728\u7c7b\u7684\u91cc\u9762<\/p>\n
\u51fd\u6570\u7ec4\u4ef6<\/p>\n
\u4f7f\u7528Context.Consumer\u6d88\u8d39\u6570\u636e<\/p>\n
\/\/\u5b50\u7ec4\u4ef6
\nimport MyContext from ".\/context";
\nimport React from "react";
\nimport GrandChild from ".\/grandChild";
\nfunction Child(){
\n render() {
\n return <MyContext.Consumer>
\n {
\n value => <>
\n <h1>\u6211\u662f\u5b50\u7ec4\u4ef6{value}<\/h1>
\n <GrandChild\/>
\n <\/>
\n }
\n <\/MyContext.Consumer>
\n }
\n}
\nexport default Child <\/p>\n
\u4f7f\u7528useContext\u6d88\u8d39\u6570\u636e<\/p>\n
\/\/\u5b50\u7ec4\u4ef6
\nimport MyContext from ".\/context";
\nimport React, { useContext } from "react";
\nimport GrandChild from ".\/grandChild";
\nfunction Child() {
\n const contextValue = useContext(MyContext)
\n return <>
\n <h1>{contextValue}<\/h1>
\n <\/>
\n}
\nexport default Child <\/p>\n
\u5728react\u4e2d\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u591a\u4e2acontext\u5d4c\u5957,\u53ef\u4ee5\u89e3\u51b3\u4e0d\u540c\u5c42\u7ea7,\u4e0d\u540c\u4fa7\u91cd\u70b9\u7684\u6570\u636e\u5171\u4eab\u95ee\u9898,\u4fdd\u6301\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027<\/p>\n
\u591a\u4e2acontext\u5d4c\u5957\u5c31\u662f\u6bcf\u4e2acontext\u7ba1\u7406\u7279\u5b9a\u7c7b\u578b\u7684\u6570\u636e,\u5982\u6743\u9650\u63a7\u5236,\u6709\u7ba1\u7406\u8def\u7531\u7684context,\u6709\u7ba1\u7406\u6743\u9650\u7684context<\/p>\n
\/\/\u7236\u7ec4\u4ef6
\nfunction App(){
\nreturn <RouterContext.Provider value={router}>
\n <PermissionContext.Provider value={permissions}>
\n <Admin\/>
\n <\/PermissionContext.Provider>
\n<\/RouterContext.Provider>
\n}
\nexport default App
\n\/\/ \u5b50\u7ec4\u4ef6
\nfunction AdminButton() {
\n const router = useContext(RouterContext);
\n const permissions = useContext(PermissionContext);
\n｝ <\/p>\n
\u5728\u9879\u76ee\u4e2d\u6211\u4eec\u53ef\u4ee5\u9002\u5f53\u7684\u5d4c\u5957context,\u901a\u5e383\u52304\u5c42\u4ee5\u5185,\u907f\u514d\u8fc7\u5ea6\u5d4c\u5957\u3002\u5d4c\u5957\u591a\u4e2acontext\u53ef\u4ee5\u8ba9react\u5b9e\u73b0\u72b6\u6001\u7684\u6a21\u5757\u5316\u7ba1\u7406,\u4fdd\u6301\u4ee3\u7801\u804c\u8d23\u7684\u5355\u4e00\u6027,\u4f18\u5316\u7ec4\u4ef6\u6e32\u67d3\u6027\u80fd,\u63d0\u9ad8\u5927\u578b\u5e94\u7528\u7684\u53ef\u7ef4\u62a4\u6027<\/p>\n
\u9ad8\u9636\u7ec4\u4ef6(HOC)\u662f\u4e00\u4e2a\u51fd\u6570,\u63a5\u6536\u4e00\u4e2a\u7ec4\u4ef6,\u5e76\u8fd4\u56de\u4e00\u4e2a\u65b0\u7ec4\u4ef6,\u4e3b\u8981\u7528\u4e8e\u7ec4\u4ef6\u7684\u903b\u8f91\u590d\u7528\u548c\u5171\u4eab,\u4e0d\u662f\u76f4\u63a5\u6e32\u67d3UI\u754c\u9762,\u7c7b\u4f3c\u4e8ejs\u7684\u51fd\u6570<\/p>\n
\u6ce8:HOC\u5e94\u5f53\u662f\u7eaf\u51fd\u6570,\u6ca1\u6709\u526f\u4f5c\u7528,\u4e0d\u80fd\u5728HOC\u5185\u4fee\u6539\u539f\u59cb\u7ec4\u4ef6,\u800c\u662f\u8fd4\u56de\u4e00\u4e2a\u65b0\u7ec4\u4ef6,\u9ad8\u9636\u7ec4\u4ef6\u4e00\u822c\u4ee5with\u5f00\u5934,\u8868\u793a\u4e3a\u7ec4\u4ef6\u63d0\u4f9b\u9644\u52a0\u529f\u80fd<\/p>\n
\/\/\u5b50\u7ec4\u4ef6
\nclass Child extends React.PureComponent{
\n render(){
\n return<>
\n <h1>\u6211\u662f\u513f\u5b50\u7ec4\u4ef6<\/h1>
\n <\/>
\n }
\n}
\n\/\/\u5b50\u7ec4\u4ef6
\nclass Son extends React.PureComponent {
\n render() {
\n return <>
\n <h1>\u6211\u662f\u5b59\u5b50\u7ec4\u4ef6<\/h1>
\n <\/>
\n }
\n}
\nexport default GrandChild
\n\/\/\u9ad8\u9636\u7ec4\u4ef6
\nfunction withLog(Wrapcomponent) {
\n return class extends React.Component {
\n\/\/\u590d\u7528\u7684\u903b\u8f91
\n componentDidMount() {
\n console.log("componentDidMount")
\n }
\n render() {
\n return <Wrapcomponent \/>
\n }
\n }
\n}
\nconst Childh=withLog(Child)
\nconst GrandC=withLog(Son)
\nclass App extends React.Component {
\n render() {
\n return <>
\n <Childh\/>
\n <GrandC\/>
\n <\/>
\n }
\n}
\nexport default App<\/p>\n
\u5728\u9ad8\u9636\u7ec4\u4ef6\u8fd4\u56de\u7684\u65b0\u7ec4\u4ef6\u4e2d\u901a\u8fc7props\u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u6765\u7684\u6570\u636e,\u56e0\u4e3a\u6709\u591a\u4e2a\u6570\u636e,\u6240\u4ee5\u901a\u8fc7\u6269\u5c55\u8fd0\u7b97\u7b26\u5c06\u4f20\u6765\u7684\u6570\u636e\u5c55\u5f00<\/p>\n
function withLog(Wrapcomponent) {
\n return class extends React.Component {
\n componentDidMount() {
\n console.log("componentDidMount")
\n }
\n render() {
\n return <Wrapcomponent {…this.props}\/>
\n }
\n }
\n}
\nconst Childh=withLog(Child)
\nconst GrandC=withLog(GrandChild)<\/p>\n
class App extends React.Component {
\n state={
\n msg:"\u6211\u662f\u9ad8\u9636\u7ec4\u4ef6"
\n }
\n render() {
\n const {msg}=this.state
\n return <>
\n <Childh cData={msg} oData="hi"\/>
\n <GrandC gData={msg}\/>
\n <\/>
\n }
\n} <\/p>\n
\u6ce8:\u9ad8\u9636\u7ec4\u4ef6\u4e5f\u9002\u7528\u4e8e\u51fd\u6570\u7ec4\u4ef6<\/p>\n
\u53d1\u9001\u8bf7\u6c42\u663e\u793a\u5ba0\u7269\u7167\u7247<\/p>\n
\u8fd9\u4e2a\u6848\u4f8b\u7528\u5230\u4e86axios,\u6211\u4eec\u8981\u5728\u9879\u76ee\u4e2d\u5b89\u88c5axios<\/p>\n
npm i axios
\nclass Child extends React.PureComponent{
\n render(){
\n return<>
\n <img src={this.props.url} alt="" \/>
\n <h1>\u6211\u662f\u732b<\/h1>
\n <\/>
\n }
\n}
\nexport default Child
\nclass GrandChild extends React.PureComponent {
\n render() {
\n return <>
\n <img src={this.props.url} alt="" \/>
\n <h1>\u6211\u662f\u72d7<\/h1>
\n <\/>
\n }
\n}
\nexport default GrandChild
\n\/\/\u9ad8\u9636\u7ec4\u4ef6
\nfunction withPets(Wrapcomponent,url,type){
\n return class extends React.PureComponent{
\n state={
\n data:""
\n }
\n getData=()=>{
\n axios.get(url).then(res=>{
\n this.setState({
\n data:type===1?res.data.message:res.data[0].url
\n })
\n })
\n }
\n componentDidMount(){
\n this.getData()
\n }
\n render(){
\n return<>
\n <Wrapcomponent url={this.state.data} {…this.props}\/>
\n <\/>
\n }
\n }<\/p>\n
}
\nconst Childc=withPets(Child,"https:\/\/dog.ceo\/api\/breeds\/image\/random",1)
\nconst Grandc=withPets(GrandChild,"https:\/\/api.thecatapi.com\/vl\/images\/search",2)
\nclass App extends React.PureComponent{
\n render(){
\n return<>
\n <Childc\/>
\n <Grandc\/>
\n <\/>
\n }
\n}
\nexport default App<\/p>\n
\u6ce8:\u5f53\u6211\u4eec\u4f7f\u7528axios\u53d1\u9001\u8bf7\u6c42\u65f6,\u6211\u8981\u5904\u7406\u8de8\u57df\u95ee\u9898,\u89e3\u51b3\u8de8\u57df\u95ee\u9898\u7684\u65b9\u6848\u6709\u5f88\u591a,\u6bd4\u8f83\u5e38\u7528\u7684\u5c31\u662fproxy\u4ee3\u7406(\u5f00\u53d1\u73af\u5883)<\/p>\n
\u4f7f\u7528create-react-app\u521b\u5efa\u9879\u76ee\u8de8\u57df\u5904\u7406<\/p>\n
\u5982\u679c\u8bf7\u6c42\u6bd4\u8f83\u5c11\u7684\u8bdd,\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u5728package.json\u4e2d\u8fdb\u884c\u914d\u7f6e<\/p>\n
\u8bf7\u6c42\u6bd4\u8f83\u591a\u7684\u8bdd,\u5148\u5728src\u6587\u4ef6\u5939\u4e0b\u521b\u5efasetupProxy.js\u6587\u4ef6(\u6587\u4ef6\u540d\u4e0d\u80fd\u4fee\u6539\u5fc5\u987b\u662f\u8fd9\u4e2a)<\/p>\n
\/\/setupProxy.js
\nconst {createProxyMiddleware}=require("http-proxy-middleware")
\nmodule.exports=function(app){
\n app.use(createProxyMiddleware("\/api"),{
\n target:"https:\/\/api.jisuapi.com\/recipe",\/\/\u540e\u7aef\u670d\u52a1\u5668\u5730\u5740
\n changeOrigion:true,
\n pathRewrite:{
\n "\/^api":""
\n }
\n })
\n} <\/p>\n
\u4f7f\u7528vite\u521b\u5efa\u9879\u76ee\u8de8\u57df\u5904\u7406<\/p>\n
\u5728vite.config.js\u6587\u4ef6\u4e2d\u914d\u7f6e\u8de8\u57df\u5c31\u53ef\u4ee5\u4e86<\/p>\n
import { defineConfig } from 'vite'
\nimport react from '@vitejs\/plugin-react'
\n\/\/ https:\/\/vite.dev\/config\/
\nexport default defineConfig({
\n plugins: [react()],
\n server:{
\n proxy:{
\n "\/api":{\/\/\u5339\u914d\u6240\u6709\u4ee5`\/api`\u5f00\u5934\u7684\u8bf7\u6c42
\n target:"https:\/\/api.jisuapi.com\/recipe",\/\/\u540e\u7aef\u670d\u52a1\u5668\u5730\u5740
\n changeOrigin:true,\/\/\u4fee\u6539\u8bf7\u6c42\u6e90(\u907f\u514dCORS\u95ee\u9898)
\n rewrite:(path=>path.replace(\/^\\\\\/api\/,""))\/\/\u79fb\u9664\/api\u8bf7\u6c42
\n }
\n }
\n }
\n})<\/p>\n
\u9762\u8bd5\u4e2d\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u56de\u7b54:<\/p>\n
React\u751f\u547d\u5468\u671f\u5206\u4e3a\u4e09\u4e2a\u9636\u6bb5:\u6302\u8f7d\u9636\u6bb5\u3001\u66f4\u65b0\u9636\u6bb5\u3001\u5378\u8f7d\u9636\u6bb5,\u5728\u7c7b\u7ec4\u4ef6\u4e2d\u6302\u8f7d\u9636\u6bb5\u4f1a\u4f9d\u6b21\u8c03\u7528constructor,getDerivedStateFromProps,render,componentDidMount\u3002\u66f4\u65b0\u9636\u6bb5:\u4f1a\u8c03\u7528getDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdate\u548ccomponentDidUpdate\u3002\u5378\u8f7d\u9636\u6bb5:componentWillUnmount\u3002<\/p>\n
React16.3\u7248\u672c\u4e4b\u540e\u5e9f\u9664\u4e86\u4e00\u4e9b\u4e0d\u5b89\u5168\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5,\u5982:\u6302\u8f7d\u9636\u6bb5:componentWillMount\u3002\u66f4\u65b0\u9636\u6bb5:componentWillReceiveProps,componentWillUpdate,shouldComponentUpdate,\u4ee5\u9002\u5e94fiber\u67b6\u6784\u7684\u5f02\u6b65\u6e32\u67d3\u7279\u6027<\/p>\n
\u51fd\u6570\u7ec4\u4ef6\u6ca1\u6709\u751f\u547d\u5468\u671f\u4f46\u662f\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528useEffect Hook\u6765\u6a21\u62df\u751f\u547d\u5468\u671f<\/p>\n
\u9762\u8bd5\u4e2d\u8fd8\u6709\u53ef\u80fd\u4f1a\u95ee\u6211\u4eec:<\/p>\n
getDerivedStateFromProps\u6709\u4ec0\u4e48\u4f5c\u7528<\/p>\n
\u5b83\u662f\u4e00\u4e2a\u9759\u6001\u65b9\u6cd5,\u5728render\u524d\u8fdb\u884c\u8c03\u7528,\u53ef\u4ee5\u6839\u636eprops\u7684\u53d8\u5316\u6765\u66f4\u65b0state,\u66ff\u4ee3\u4e86\u4e0d\u5b89\u5168\u7684componentWillReceiveProps<\/p>\n
\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u600e\u4e48\u5b9e\u73b0shouldComponentUpdate<\/p>\n
shouldComponentUpdate\u662f\u4e00\u4e2a\u6027\u80fd\u4f18\u5316\u7684\u751f\u547d\u5468\u671f,\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u9ad8\u9636\u7ec4\u4ef6Recat.memo\u5305\u88f9\u7ec4\u4ef6\u8fdb\u884c\u6d45\u5c42\u6bd4\u8f83,\u6216\u8005\u4f7f\u7528react\u63d0\u4f9b\u7684\u6027\u80fd\u4f18\u5316\u7684hook,useMemo,useCallback\u6765\u4f18\u5316\u8ba1\u7b97\u7ed3\u679c\u548c\u51fd\u6570<\/p>\n
React\u7ec4\u4ef6\u4f20\u503c\u65b9\u5f0f\u6709\u4ee5\u4e0b\u51e0\u79cd\u65b9\u5f0f:<\/p>\n
(1)\u7236\u5b50\u7ec4\u4ef6:\u7236\u7ec4\u4ef6\u901a\u8fc7props\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e,\u5b50\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7\u56de\u8c03\u51fd\u6570\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e<\/p>\n
(2)\u8de8\u7ec4\u4ef6\u901a\u4fe1:\u7236\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7context\u63d0\u4f9b\u7684provider\u6765\u63d0\u4f9b\u6570\u636e,\u540e\u4ee3\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7consumer\u6216useContext\u6765\u4f7f\u7528\u6570\u636e,\u8fd9\u6837\u53ef\u4ee5\u907f\u514dprops\u5c42\u5c42\u4f20\u9012<\/p>\n
(3)\u590d\u6742\u72b6\u6001\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528redux\u7b49\u72b6\u6001\u7ba1\u7406\u5e93\u96c6\u4e2d\u7ba1\u7406\u6570\u636e,\u8fd8\u53ef\u4ee5\u4f7f\u7528react\u63d0\u4f9b\u7684hook useReducer<\/p>\n
(4)\u5bf9\u4e8e\u5c11\u91cf\u7684\u5144\u5f1f\u7ec4\u4ef6\u4e4b\u95f4\u7684\u901a\u4fe1\u6211\u4eec\u4e5f\u53ef\u4ee5\u4f7f\u7528\u72b6\u6001\u63d0\u5347,\u9700\u8981\u7236\u7ec4\u4ef6\u4f5c\u4e3a\u4e2d\u95f4\u6865\u6881,\u5171\u4eab\u72b6\u6001\u63d0\u5347\u5230\u6700\u8fd1\u7684\u5171\u540c\u7684\u7236\u7ec4\u4ef6,\u4e00\u4e9b\u7279\u6b8a\u573a\u666f\u6211\u4eec\u8fd8\u53ef\u4ee5\u901a\u8fc7refs\u8bbf\u95ee\u7ec4\u4ef6\u5b9e\u4f8b\u6216\u4f7f\u7528\u4e8b\u4ef6\u603b\u7ebf<\/p>\n
\u5728\u9879\u76ee\u4e2d,\u6211\u4f1a\u6839\u636e\u7ec4\u4ef6\u5173\u7cfb\u548c\u6570\u636e\u7c7b\u578b\u9009\u62e9\u5408\u9002\u7684\u65b9\u5f0f,\u6bd4\u5982\u7b80\u5355\u7684\u7236\u5b50\u901a\u4fe1,\u4f7f\u7528props\u5c31\u53ef\u4ee5\u4e86,\u4e3b\u9898\u5207\u6362\u4e1a\u52a1\u53ef\u4ee5\u7528context,\u767b\u5f55\u4e1a\u52a1\u548c\u6743\u9650\u7ba1\u7406,\u7528\u72b6\u6001\u7ba1\u7406\u5e93\u548c\u672c\u5730\u5b58\u50a8\u76f8\u7ed3\u5408\u7684\u65b9\u5f0f,\u53ef\u4ee5\u63d0\u9ad8\u7a0b\u5e8f\u7684\u6027\u80fd,\u5bf9\u4e8e\u8868\u5355\u7684\u4e00\u4e9b\u4e1a\u52a1\u590d\u6742\u7684\u4ea4\u4e92,\u6211\u4f1a\u6839\u636e\u5b9e\u9645\u9700\u6c42\u7ed3\u5408\u591a\u79cd\u65b9\u5f0f\u6765\u5b9e\u73b0,\u4ee5\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u590d\u6e32\u67d3,\u4f18\u5316\u6027\u80fd<\/p>\n
\u5728\u9762\u8bd5\u4e2d\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u56de\u7b54:<\/p>\n
\u8de8\u57df\u5c31\u662f\u6d4f\u89c8\u5668\u4e0d\u80fd\u8bbf\u95ee\u5176\u4ed6\u7f51\u7ad9\u7684js\u811a\u672c,\u8fd9\u662f\u7531\u6d4f\u89c8\u5668\u7684\u540c\u6e90\u7b56\u7565\u5f15\u8d77\u7684,\u540c\u6e90\u7b56\u7565\u5c31\u662f\u540c\u7aef\u53e3,\u540c\u534f\u8bae,\u540c\u57df\u540d<\/p>\n
\u6211\u4eec\u901a\u5e38\u6709\u4ee5\u4e0b\u51e0\u79cd\u65b9\u5f0f\u53ef\u4ee5\u89e3\u51b3\u8de8\u57df:\u5728\u5f00\u53d1\u73af\u5883\u65f6,\u6211\u901a\u5e38\u4f7f\u7528\u4ee3\u7406\u670d\u52a1\u5668\u6216\u914d\u7f6e\u6784\u5efa\u5de5\u5177\u7684proxy,\u5728\u751f\u4ea7\u73af\u5883\u4e2d,\u901a\u5e38\u540e\u7aef\u914d\u7f6eCORS\u5c31\u662f\u670d\u52a1\u7aef\u8bbe\u7f6eAccess-Control-Allow-Origion,\u524d\u7aef\u4e0d\u7528\u8bbe\u7f6e,\u5982\u679c\u662fcookie\u8bf7\u6c42\u524d\u540e\u7aef\u90fd\u9700\u8981\u8bbe\u7f6e,\u4e5f\u53ef\u4ee5\u4f7f\u7528\u53cd\u5411\u4ee3\u7406Nginx\u5f00\u542f\u4e00\u4e2a\u4ee3\u7406\u670d\u52a1,\u6765\u5b9e\u73b0\u6570\u636e\u7684\u8f6c\u53d1<\/p>\n
\u8fd8\u6709\u51e0\u4e2a\u4e0d\u5e38\u7528\u7684\u8de8\u57df\u89e3\u51b3\u65b9\u6848:\u53ef\u4ee5\u901a\u8fc7JSONP\u52a8\u6001\u521b\u5efascript,\u518d\u8bf7\u6c42\u4e00\u4e2a\u5e26\u53c2\u7f51\u5740\u6765\u5b9e\u73b0\u8de8\u57df,JSONP\u53ea\u652f\u6301get\u8bf7\u6c42,\u5b89\u5168\u6027\u80fd\u6bd4\u8f83\u5dee,\u6240\u4ee5\u4f7f\u7528\u7684\u5f88\u5c11\u3002WebSocket\u652f\u6301\u4efb\u4f55\u57df\u540d\u548c\u7aef\u53e3\u7684\u8bbf\u95ee,\u4e0d\u53d7\u540c\u6e90\u7b56\u7565\u7684\u5f71\u54cd,\u4f46\u5b83\u53ef\u80fd\u4f1a\u53d7\u4ee3\u7406\u670d\u52a1\u5668\u914d\u7f6e\u7684\u5f71\u54cd\u3002\u8fd8\u53ef\u4ee5\u4f7f\u7528document.domain+iframe\u6765\u5b9e\u73b0\u8de8\u57df,\u4e24\u4e2a\u9875\u9762\u90fd\u901a\u8fc7js\u5f3a\u5236\u8bbe\u7f6edocument.domain\u4e3a\u57fa\u7840\u7684\u4e3b\u57df\u6765\u5b9e\u73b0\u540c\u57df,\u6b64\u5916,h5\u8fd8\u63d0\u4f9b\u4e86postMessage\u6765\u5b9e\u73b0\u8de8\u57df,\u5b83\u4eec\u5728\u771f\u5b9e\u9879\u76ee\u4e2d\u5b9e\u73b0\u8d77\u6765\u590d\u6742\u5ea6\u9ad8,\u800c\u4e14\u4e5f\u4e0d\u5b89\u5168,\u6240\u4ee5\u4e0d\u5efa\u8bae\u4f7f\u7528<\/p>\n
\u9762\u8bd5\u4e2d\u8fd8\u53ef\u80fd\u4f1a\u95ee:<\/p>\n
\u5f00\u53d1\u73af\u5883\u4e3a\u4ec0\u4e48\u9700\u8981\u7279\u6b8a\u5904\u7406\u8de8\u57df:<\/p>\n
\u5f00\u53d1\u73af\u5883\u524d\u7aef\u662f\u8fd0\u884c\u5728localhost\u672c\u5730\u57df\u540d\u4e0a\u7684,\u800c\u540e\u7aef\u901a\u5e38\u5728\u53e6\u4e00\u4e2a\u7aef\u53e3\u6216\u57df\u540d\u4e0a\u3002\u5728\u751f\u4ea7\u73af\u5883\u4e0b\u524d\u540e\u7aef\u901a\u5e38\u90e8\u7f72\u5728\u540c\u4e00\u4e2a\u57df\u540d\u4e0b,\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e\u6b63\u786e\u7684CORS\u6216Nginx\u6765\u89e3\u51b3<\/p>\n
\u5728react\u4e2d\u5bf9\u4e8e\u7b80\u5355\u7684\u5c0f\u9879\u76ee\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528CSS Modules\u6784\u5efa\u65f6\u8f6c\u6362\u7c7b\u540d\u4e3a\u54c8\u5e0c\u5b57\u7b26\u4e32,\u751f\u6210JSON\u6620\u5c04\u5173\u7cfb,\u6765\u751f\u6210\u552f\u4e00\u7c7b\u540d,\u5b9e\u73b0\u6837\u5f0f\u9694\u79bb\u3002\u5bf9\u4e8e\u4e00\u4e9b\u590d\u6742\u7684\u9879\u76ee,\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528css-in-js\u7684emotion,\u5b83\u63d0\u4f9b\u4e86\u52a8\u6001\u7684\u4e3b\u9898\u652f\u6301,\u5185\u7f6e\u7684\u9694\u79bb\u673a\u5236,\u8fd8\u53ef\u4ee5\u4f7f\u7528css\u9884\u5904\u7406\u5668sass\/less<\/p>\n
\u5728vue\u9879\u76ee\u4e2d,\u6211\u4eec\u901a\u5e38\u4f7f\u7528scoped\u6765\u5b9e\u73b0\u6837\u5f0f\u9694\u79bb,\u6211\u4eec\u5728style\u6807\u7b7e\u4e0a\u52a0\u4e0ascoped\u5c5e\u6027, \u5c31\u4f1a\u5728\u6b64\u7ec4\u4ef6\u7684\u6807\u7b7e\u4e0a\u968f\u673a\u751f\u6210data-v\u5f00\u5934\u7684\u5c5e\u6027,\u5fc5\u987b\u662f\u5f53\u524d\u7ec4\u4ef6\u7684\u5143\u7d20, \u624d\u4f1a\u6709\u8fd9\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027, \u624d\u4f1a\u88ab\u8fd9\u4e2a\u6837\u5f0f\u4f5c\u7528\u5230\u3002\u5728vue\u4e2d\u6211\u4eec\u4e5f\u53ef\u4ee5\u4f7f\u7528css Modules,\u76f4\u63a5\u5728style\u6807\u7b7e\u4e0a\u6dfb\u52a0module\u5c5e\u6027\u5c31\u53ef\u4ee5\u4e86<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n
\u3000<\/p>\n
\u00a0 \u00a0 \u00a0<\/p>\n<\/p>\n
\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb325\u6b21\uff0c\u70b9\u8d5e11\u6b21\uff0c\u6536\u85cf10\u6b21\u3002node_modules:\u9879\u76ee\u7684\u6838\u5fc3\u6a21\u5757,\u4f9d\u8d56\u5305public:\u5b58\u653e\u9759\u6001\u8d44\u6e90\u6587\u4ef6.ico:\u9875\u7b7e\u7684logoindex.html:\u552f\u4e00\u7684\u9875\u9762\u6587\u4ef6,\u53ea\u63d0\u4f9b\u6839\u8282\u70b9manifest.json:\u79fb\u52a8\u7aef\u914d\u7f6e\u6587\u4ef6robots.txt:\u544a\u8bc9\u722c\u866b\u8005,\u4e0d\u53ef\u722c\u7684\u9875\u9762,\u6ca1\u6709\u5b9e\u8d28\u4f5c\u7528\u53ea\u662f\u8b66\u544a.gitignore:\u58f0\u660e\u4e00\u4e9b\u5728git\u4e0a\u4f20\u65f6\u9700\u8981\u5ffd\u7565\u7684\u6587\u4ef6package.json:\u9879\u76ee\u7684\u8bf4\u660e\u6587\u4ef6,\u6709\u54ea\u4e9b\u4f9d\u8d56,\u4f9d\u8d56\u4e86\u54ea\u4e2a\u7248\u672cpackage-lock.json:\u9879\u76ee\u4f9d\u8d56\u7684\u5b89\u88c5\u5305,\u4e00\u4e9b\u7248\u672c\u4e0d\u4f1a\u505a\u4e00\u4e9b\u9650\u5236,\u8fdb\u884c\u7248\u672c\u9501\u5b9a\u3002<\/p>\n","protected":false},"author":2,"featured_media":57701,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[722,187,524,6062],"topic":[],"class_list":["post-57705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-ecmascript","tag-javascript","tag-react-js","tag-react18"],"yoast_head":"\n