{"id":85772,"date":"2020-05-15T20:51:08","date_gmt":"2020-05-15T12:51:08","guid":{"rendered":"http:\/\/4563.org\/?p=85772"},"modified":"2020-05-15T20:51:08","modified_gmt":"2020-05-15T12:51:08","slug":"%e5%b8%8c%e6%9c%9b%e6%8a%8a%e9%80%bb%e8%be%91%e5%92%8c%e8%a7%86%e5%9b%be%e5%88%86%e5%bc%80%ef%bc%8c%e9%80%bb%e8%be%91%e7%b1%bb%e7%9a%84%e5%ae%9e%e4%be%8b%e6%94%b9%e5%8f%98%e5%90%8e%ef%bc%8c-react","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=85772","title":{"rendered":"\u5e0c\u671b\u628a\u903b\u8f91\u548c\u89c6\u56fe\u5206\u5f00\uff0c\u903b\u8f91\u7c7b\u7684\u5b9e\u4f8b\u6539\u53d8\u540e\uff0c react \u5982\u4f55\u901a\u77e5\u7ec4\u4ef6\u66f4\u65b0\uff1f"},"content":{"rendered":"
\n
\n
\n

\u5e0c\u671b\u628a\u903b\u8f91\u548c\u89c6\u56fe\u5206\u5f00\uff0c\u903b\u8f91\u7c7b\u7684\u5b9e\u4f8b\u6539\u53d8\u540e\uff0c react \u5982\u4f55\u901a\u77e5\u7ec4\u4ef6\u66f4\u65b0\uff1f <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span> <\/i> 5<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u7531\u4e8e\u4e00\u4e9b\u539f\u56e0\uff0c\u6211\u5e0c\u671b\u628a\u903b\u8f91\u548c\u89c6\u56fe\u5206\u5f00\uff0c\u5982\u4e0b\u5217\u4f2a\u4ee3\u7801\u6240\u793a\uff0c\u5927\u4f6c\u80fd\u8bf4\u8bf4\u6709\u4ec0\u4e48\u597d\u7684\u89e3\u51b3\u65b9\u6848\u5417\uff1f\u5173\u952e\u5b57\u5c31\u884c\uff0c\u8c22\u8c22\u4e86\uff01<\/p>\n

(ps: react class component \u4e5f\u662f\u89c6\u56fe\u548c\u903b\u8f91\u6df7\u5728\u4e00\u4e2a\u7c7b\u91cc\u9762, \u4e0d\u592a\u5e0c\u671b\u8fd9\u6837, \u8fd8\u662f\u6211\u7684\u4f7f\u7528\u59ff\u52bf\u4e0d\u5bf9\uff1f)<\/p>\n

import React, { useEffect } from \"react\"  class Person {   name: string    age: number    friends: Person[] }  class Family {   datas: Person[] }  class Village {   datas: Family[] }  \/\/ \u4ee5\u4e0a\u7684\u7c7b\u4e3a\u7eaf\u903b\u8f91\u7c7b, \u4ec5\u8fdb\u884c\u6570\u636e\u5904\u7406, \u4e0d\u542b\u89c6\u56fe\u6e32\u67d3  function View() {   const village = new Village()    useEffect(() => {     \/\/ Village \u6cdb\u6307\u4e00\u4e9b\u5c42\u7ea7\u5f88\u6df1\u7684\u7c7b     \/\/ \u8fd9\u513f\u6709\u4e00\u4e9b\u4ea4\u4e92, \u7136\u540e\u4f1a\u4fee\u6539 village \u7684\u4e00\u4e9b\u5c5e\u6027, \u548c\u5c5e\u6027\u7684\u540e\u4ee3\u5c5e\u6027     \/\/ \u95ee\u9898\u662f, \u4fee\u6539\u4e86 village \u4e4b\u540e, \u600e\u4e48\u901a\u77e5\u7ec4\u4ef6\u66f4\u65b0\u5462...   }, [village])    return  village.datas.map((family) => family.datas.map((person) => render(person))) } <\/code><\/pre>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (10<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : iamppz <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u7528 state hook\uff0cuseState(new Village())                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @iamppz useState \u4e5f\u6ca1\u7528\uff0c\u5f53\u6211\u7528 village \u81ea\u8eab\u7684\u65b9\u6cd5\u4fee\u6539\u4e86\u81ea\u8eab\u7684\u6570\u636e\u7684\u65f6\u5019\uff0c\u4ecd\u7136\u4e0d\u4f1a\u89e6\u53d1\u7ec4\u4ef6\u66f4\u65b0                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : WittBulter <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u5f53\u4f60\u5728 `React FC` \u4e2d\u8c03\u7528 `setState` \u4e0d\u540c\u7684\u503c\u4f1a\u5c31\u89e6\u53d1\u4e00\u6b21\u66f4\u65b0\uff0c\u6216\u8005 `Props` \u6539\u53d8\u4e5f\u4f1a\u89e6\u53d1\uff0c\u57fa\u4e8e\u8fd9\u4e2a\u539f\u7406\u4f60\u53ef\u4ee5\u5199\u4e00\u4e2a\u975e\u5e38\u7b80\u5355 hooks \u6765\u89e3\u51b3\u8fd9\u4ef6\u4e8b:<\/p>\n
    “`
    const [, setState] = useState({})
    const forceUpdate = useCallback(() => setState({}), [])
    “`<\/p>\n
    \u6211\u5728 codesendbox \u4e0a\u7ed9\u4f60\u5199\u4e86\u4e00\u4e2a hooks \u7684\u4f8b\u5b50\uff1a https:\/\/codesandbox.io\/s\/force-update-react-7e8zs?file=\/src\/app.js                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @iamppz \u6bd4\u65b9\u8bf4<\/p>\n
    const village = new Village()<\/p>\n
    const familyA = village.datas[3]<\/p>\n
    const personS = familyA.datas[4]<\/p>\n
    personS.age += 1<\/p>\n
    \u8fd9\u6837\u7684\u60c5\u51b5\uff0c\u6211\u76ee\u524d\u7684\u5904\u7406\u662f\uff0c\u5728\u6bcf\u4e2a\u64cd\u4f5c\u65f6\uff0c\u624b\u52a8\u901a\u77e5\u7ec4\u4ef6\u66f4\u65b0\uff0c\u53ef\u662f\u8fd9\u4e5f\u592a\u50bb\u4e86…<\/p>\n
    (ps: \u53ef\u4ee5\u5168\u91cf\u66f4\u65b0 village, \u5982 setVillage(newVillage), \u4f46\u662f\u5bf9\u4e8e\u590d\u6742\u7684, \u6570\u7ec4\u548c\u5bf9\u8c61\u6df7\u6742\u7684\u5bf9\u8c61, \u8fd9\u6837\u505a\u5f88\u7d2f, \u8fd8\u4e11)                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @WittBulter \u8c22\u8c22\uff0c\u6211\u73b0\u5728\u5c31\u662f\u8fd9\u6837\u5904\u7406\u7684\uff0c\u53ef\u662f\u4e00\u65b9\u9762\u5230\u5904\u90fd\u662f forceUpdate\uff0c\u6709\u70b9\u4e11\uff0c\u53e6\u4e00\u65b9\u9762\u5168\u7a0b\u9700\u8981\u624b\u52a8\u7ba1\u7406\uff0c\u611f\u89c9\u56de\u5230\u4e86 jQ\uff0c\u5f88\u96be\u53d7…                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @WittBulter \u4f60\u7684\u5c01\u88c5\u6bd4\u6211\u7684\u5e05\uff0c\u4f60\u770b\u6211\u7684\uff1a<\/p>\n
     const [uselessFlag, setUselessFlag] = useState(false)
     const updataComponent = useCallback(() => {
     setUselessFlag(!uselessFlag)
     }, [uselessFlag])                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : iamppz <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @xiaoming1992 state \u5e94\u8be5\u662f\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539\u7684\uff0c\u4f60\u53ef\u4ee5\u7528 immutability-helper \u4fee\u6539\u5e76\u62ff\u5230 village \u7684\u4e00\u4e2a\u65b0\u7684\u514b\u9686\u5bf9\u8c61\uff0c\u7136\u540e\u518d\u8c03\u7528 setState \u89e6\u53d1\u9875\u9762\u7684\u5237\u65b0\u3002<\/p>\n
    \u53e6\u5916\u5982\u679c\u76ee\u7684\u53ea\u662f\u89c6\u56fe\u548c\u903b\u8f91\u5206\u79bb\u7684\u8bdd\uff0c\u662f\u5426\u53ef\u4ee5\u8003\u8651\u5c06 reducer \u51fd\u6570\u4ece\u89c6\u56fe\u6587\u4ef6\u4e2d\u5206\u79bb\u51fa\u53bb\uff1a<\/p>\n
    \u4f8b\u5982 biz.js
    “`
    function reducer(state, action) {
     switch (action):
     case ‘xxx’:
     \/\/ immutability-helper
     update(state, {
     x: {y: {z: {$set: 7}}},
     });
     break;
     default:
     break;
     return {…state};
    }
    “`<\/p>\n
    \u89c6\u56fe\u4e2d\uff1a
    “`
    function View() {
     const [data, dispatch] = useReducer(reducer, new Village());
     return <span>{JSON.stringify(data)}<\/span>;
    }
    “`                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : theprimone <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 forceUpdate \u53ef\u4ee5\u518d\u5c01\u88c5\u4e00\u4e2a\u50cf setState \u7684\u529f\u80fd\u561b\uff0c\u89e6\u53d1\u4e86\u81ea\u52a8\u8c03\u7528 forceUpdate \u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : xiaoming1992 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @iamppz reducer \u786e\u5b9e\u633a\u597d\uff0c\u53ea\u662f\u4e0d\u592a\u559c\u6b22\u8fd9\u79cd\u98ce\u683c\uff0c\u8c8c\u4f3c\u662f\u76ee\u524d\u7684\u6700\u4f18\u65b9\u6848\u4e86<\/p>\n
    @theprimone \u5bf9\u8c61\u5c42\u7ea7\u6bd4\u8f83\u6df1\uff0c\u5bf9\u8c61\u4e2d\u6709\u6570\u7ec4\uff0c\u6570\u7ec4\u91cc\u9762\u662f\u5bf9\u8c61\uff0c\u5bf9\u8c61\u4e0b\u8fb9\u8fd8\u6709\u6570\u7ec4\uff0c\u6df1\u5c42\u5bf9\u8c61\u7684\u5c5e\u6027\u53d8\u52a8\u4e0d\u597d\u76d1\u542c\uff0c\u53ef\u80fd\u53c8\u4f1a\u56de\u5230\u4e0b\u9762\u8fd9\u79cd\u6837\u5b50:
    setData({
    …data,
    key: [
    …data[key],
    val,
    ],
    })
    \u8fd9\u4ec5\u4ec5\u4e00\u5c42\u5c31\u5df2\u7ecf\u8fd9\u4e48\u4e11\u4e86\uff0c\u8981\u662f\u4e09\u56db\u5c42\uff0c\u5c31\u4e11\u7684\u6ca1\u8fb9\u4e86\uff0c\u800c\u81ea\u52a8\u8c03\u7528\uff0c\u524d\u63d0\u8fd8\u662f\u5f97\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\uff0c\u53ef\u80fd\u5f97\u8bd5\u8bd5 proxy                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : theprimone <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 proxy \u8fd8\u6ca1\u73a9\u8fc7\uff0c\u76f4\u63a5\u70b9\u6bd4\u8f83\u5dee\u5f02\u7684\u8bdd\uff0cfast-deep-equal \u5e94\u8be5\u53ef\u4ee5\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    \u5e0c\u671b\u628a\u903b\u8f91\u548c\u89c6\u56fe\u5206\u5f00\uff0c\u903b\u8f91\u7c7b\u7684\u5b9e\u4f8b…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/85772"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=85772"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/85772\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=85772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=85772"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=85772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}