{"id":211,"date":"2021-02-10T10:20:30","date_gmt":"2021-02-10T02:20:30","guid":{"rendered":"http:\/\/gjweb.top\/?p=211"},"modified":"2021-09-24T21:33:21","modified_gmt":"2021-09-24T13:33:21","slug":"class%e7%bb%84%e4%bb%b6%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=211","title":{"rendered":"class\u7ec4\u4ef6\u8be6\u89e3"},"content":{"rendered":"\n
  1. class\u7ec4\u4ef6\u7684\u521b\u5efa\u65b9\u5f0f<\/li>
  2. \u7c7b\u7ec4\u4ef6\u4e2dprops\u7684\u4f7f\u7528<\/li>
  3. \u7c7b\u7ec4\u4ef6\u4e2dstate\u7684\u4f7f\u7528<\/li>
  4. \u7c7b\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f<\/li><\/ol>\n\n\n\n

    1. class\u7ec4\u4ef6\u7684\u521b\u5efa\u65b9\u5f0f<\/h2>\n\n\n\n

    class\u7ec4\u4ef6\u4e5f\u53eb\u4f5c\u7c7b\u7ec4\u4ef6,\u6709\u4e24\u79cd\u521b\u5efa\u65b9\u5f0f,\u7b2c\u4e00\u79cd\u4e3aEs5,\u7b2c\u4e8c\u4e2d\u8bd5Es6\u65b9\u5f0f.<\/p>\n\n\n\n

    • Es5\u521b\u5efa\u65b9\u5f0f<\/li><\/ul>\n\n\n\n
          import React from \"react\"
          const A = React.createClass({
              render(){
                  return (
                      <div>hello wrold<\/div>
                  )
              }
          })
          export default A<\/code><\/pre>\n\n\n\n
      • Es6\u521b\u5efa\u65b9\u5f0f<\/li><\/ul>\n\n\n\n
            import React from \"react\"
            
            class B extends React.Component{
                constructor(props){
                    super(props)
                }
                render(){
                    retrun (
                        <div>hello wrold<\/div>
                    )
                }
            }
            export default B;<\/code><\/pre>\n\n\n\n
        2. \u7c7b\u7ec4\u4ef6\u4e2dprops\u7684\u4f7f\u7528<\/h2>\n\n\n\n
        props<\/strong>\u5916\u90e8\u6570\u636e,\u6307\u7684\u662f\u7236\u7ec4\u4ef6\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u7684\u503c\u6216\u8005\u51fd\u6570, ==\u6ce8\u610f:props<\/strong>\u4e2d\u4e0d\u5141\u8bb8\u5b50\u7ec4\u4ef6\u4fee\u6539\u7236\u7ec4\u4ef6\u7684\u503c==<\/p>\n\n\n\n
            import React from \"react\"
            class App extends React.Component {
                constructor(porps){
                    super(porps)
                    this.state  ={
                        num:0
                    }
                };
                add = ()=>{
                    this.state((state)=>({state.num:num+1}))
                }
                render(){
                    return(
                        <div>
                            APP
                            <P>{this.state.num}<\/p>
                            <button onClick={this.add}>add<\/button>
                            <Child number={this.state.num}><\/Child>
                        <\/div>
                    )
                }
            }
            
            class Child exentds Reach.Component{
                constructor(props){
                    super(props)
                }
                render(){
                    return(
                        <div>\u5b50\u7ec4\u4ef6\u7684\u503c{this.props.number}<\/div>
                    )
                }
            }<\/code><\/pre>\n\n\n\n
        • componentWillReceiveProps(newProps,newContext)<\/strong>\u94a9\u5b50
          • \u5f53\u524d\u63a5\u53d7\u65b0\u7684props<\/strong>\u65f6,\u4f1a\u89e6\u53d1\u6b21\u65b9\u6cd5(\u65b0\u7248react\u4e2d\u5df2\u7ecf\u5f03\u7528)<\/strong><\/li>
          • \u63a5\u53d7\u4e24\u4e2a\u53c2\u6570,\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u53d8\u5316\u540e\u7684props<\/strong>\u7684\u503c<\/li><\/ul><\/li><\/ul>\n\n\n\n
                class Child exentds Reach.Component{
                    UNSAFE_componentWillReceiveProps(newProps,newContext)
                    constructor(props){
                        super(props)
                    }
                    render(){
                        return(
                            <div>\u5b50\u7ec4\u4ef6\u7684\u503c{this.props.number}<\/div>
                        )
                    }
                }<\/code><\/pre>\n\n\n\n
            3. \u7c7b\u7ec4\u4ef6\u4e2dstate\u7684\u4f7f\u7528(state\u5185\u90e8\u6570\u636e)<\/h2>\n\n\n\n
            • \u521d\u59cb\u5316<\/li><\/ul>\n\n\n\n
                  class Child exentds Reach.Component{
                      constructor(props){
                          super(props)
                          this.state = {
                              userInfo:{
                                  name:\"\u674e\u96f7\",
                                  age:'18'
                              }
                          }
                      }
                      render(){
                          return(
                              <div>\u59d3\u540d: {this.state.userInfo.name}<\/div>
                          )
                      }
                  }
              \u200b<\/code><\/pre>\n\n\n\n
              • setState<\/strong>\u7684\u6267\u884c\u65f6\u673a\u548c\u63a8\u8350\u5199\u6cd5
                • this.setState(newState,fn)<\/strong> \u63a5\u53d7\u4e24\u4e2a\u53c2\u6570,\u7b2c\u4e00\u4e2a\u53c2\u6570\u63a5\u53d7\u88ab\u4fee\u6539\u7684\u5bf9\u8c61,\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4fee\u6539\u6210\u529f\u7684\u56de\u8c03<\/li>
                • setState<\/strong>\u4f1a\u81ea\u52a8\u5c06state<\/strong>\u4e0e\u65e7state\u8fdb\u884c\u4e00\u7ea7\u5408\u5e76 ==\u6ce8\u610f:setState\u4e0d\u4f1a\u7acb\u523b\u6539\u53d8this.state<\/strong>,\u4f1a\u5728\u5f53\u524d\u4ee3\u7801\u8fd0\u884c\u540e,\u5728\u53bb\u66f4\u65b0this.state<\/strong>,\u4ece\u800c\u89e6\u53d1UI\u66f4\u65b0== \u63a8\u8350\u5199\u6cd5<\/li><\/ul><\/li><\/ul>\n\n\n\n
                      class Child exentds Reach.Component{
                          constructor(props){
                              super(props)
                              this.state = {
                                  userInfo:{
                                      name:\"\u674e\u96f7\",
                                      age:'18'
                                  }
                              }
                          }
                          test= ()=>{
                              this.setState((state)=>({state.userInfo.name = \"\u97e9\u6885\u6885\"}))
                          }
                          render(){
                              return(
                                  <div>
                                  \u59d3\u540d: {this.state.userInfo.name}
                                  <button onClick={this.test}>test<\/button>
                                  <\/div>
                              )
                          }
                      }
                  \u200b<\/code><\/pre>\n\n\n\n
                  4. reatc\u7684\u751f\u547d\u5468\u671f<\/h2>\n\n\n\n
                  • constructor<\/strong>
                    • \u7528\u9014: \u521d\u59cb\u5316state<\/strong>,\u6b64\u65f6\u4e0d\u80fd\u8c03\u7528setState<\/strong><\/li><\/ul><\/li><\/ul>\n\n\n\n
                      • render<\/strong>
                        • \u6267\u884c\u65f6\u673a\uff1a 1. setState()<\/strong> 2. forceUpdate()<\/strong> (\u5f3a\u5236\u66f4\u65b0) 3. \u7ec4\u4ef6\u63a5\u6536\u65b0\u7684 props<\/strong><\/li>
                        • return\u9700\u8981\u5728\u6700\u5916\u5c42\u5305\u4e00\u5c42\u5757\u7ea7\u5143\u7d20
                          • <><\/>===<React.Fragment><\/React.Fragment>===<div><\/div><\/li><\/ul><\/li>
                          • \u6280\u5de7
                            • \u53ef\u4ee5\u5199if…else<\/strong><\/li>
                            • \u53ef\u4ee5\u5199\u4e09\u76ee\u8fd0\u7b97<\/strong><\/li>
                            • \u53ef\u4ee5\u5199for<\/strong>\u5faa\u73af<\/li>
                            • \u53ef\u4ee5\u5199array.map<\/strong><\/li><\/ul><\/li><\/ul><\/li>
                            • shouldComponentUpdate<\/strong>
                              • \u7528\u9014: \u8fd4\u56de\u4e00\u4e2abool\u503c,\u8868\u793a\u662f\u5426\u963b\u6b62UI\u66f4\u65b0(\u8fd4\u56detrue\u8868\u793a\u4e0d\u963b\u6b62\u66f4\u65b0)<\/li>
                              • shouldComponentUpdate(newProps,newState)<\/strong>,\u5305\u542b\u4e24\u4e2a\u53c2\u6570\u5206\u522b\u662f\u65b0\u7684props<\/strong>\u548cstate<\/strong>\u7684\u503c<\/li><\/ul><\/li><\/ul>\n\n\n\n
                                    class App extends React.Component {
                                        constructor(porps){
                                            super(porps)
                                            this.state  ={
                                                num:0
                                            }
                                        };
                                        add = ()=>{
                                            this.state((state)=>({state.num:num+1}))
                                        },
                                        shouldComponentUpdate(newProps,newState){ 
                                            \/\/\u751f\u547d\u5468\u671f\u51fd\u6570,\u7528\u4e8e\u76d1\u542cstate\u548cprops\u7684\u503c\u662f\u5426\u53d8\u5316,\u8fd4\u56defalse\u548ctrue\u51b3\u5b9a\u662f\u5426\u6e32\u67d3\u89c6\u56fe
                                            return !(newState.n === this.state.n)
                                        }
                                        render(){
                                            return(
                                                <div>
                                                    APP
                                                    <P>{this.state.num}<\/p>
                                                    <button onClick={this.add}>add<\/button>
                                                <\/div>
                                            )
                                        }
                                    }<\/code><\/pre>\n\n\n\n
                                • react\u5185\u7f6e\u4e86\u6b64\u65b9\u6cd5 \u4f7f\u7528\uff1a<\/li><\/ul>\n\n\n\n
                                      class app extends React.PureComponent {}<\/pre>\n\n\n\n
                                  • componentDidMount<\/strong><\/li><\/ul>\n\n\n\n
                                    • \u5143\u7d20\u5df2\u7ecf\u6302\u8f7d<\/li>
                                    • \u53ef\u4ee5\u53d1\u8d77AJAX<\/strong>\u8bf7\u6c42(\u5b98\u65b9\u63a8\u8350)<\/li>
                                    • \u9996\u6b21\u6e32\u67d3\u4f1a\u6267\u884c\u94a9\u5b50<\/li><\/ul>\n\n\n\n
                                        class App extends React.Component {
                                              constructor(porps){
                                                  super(porps)
                                                  \/\/\u5185\u90e8\u5c5e\u6027\u547d\u540ddom\u5143\u7d20id
                                                  this.divRef = React.createRef()
                                              };
                                              componentDidMount(){
                                                const div = this.divRef.current;
                                                console.log(div)
                                              }
                                              render(){
                                                  return(
                                                      <div ref={this.divRef}>hello world<\/div>
                                                  )
                                              }
                                          }<\/code><\/pre>\n\n\n\n
                                      • componentDidUpdate<\/strong>
                                        • \u7528\u9014 \u89c6\u56fe\u66f4\u65b0\u540e\u6267\u884c\u4ee3\u7801<\/li>
                                        • \u6b64\u5904\u53ef\u4ee5\u4f7f\u7528AJAx<\/strong>\u8bf7\u6c42\u66f4\u65b0\u6570\u636e<\/li>
                                        • \u9996\u6b21\u4e0d\u4f1a\u6267\u884c\u94a9\u5b50<\/li>
                                        • \u5728\u6b64\u5904setState\u53ef\u80fd\u4f1a\u5f15\u8d77\u65e0\u9650\u5faa\u73af<\/li>
                                        • \u5982\u679cshouldComponentUpdate<\/strong>\u8fd4\u56defalse<\/strong>,\u5219\u4e0d\u4f1a\u89e6\u53d1<\/li><\/ul><\/li>
                                        • componentWillUnmoun<\/strong>
                                          • \u7528\u9014 \u7ec4\u4ef6\u5c06\u8981\u79fb\u9664\u9875\u9762\u7136\u540e\u88ab\u9500\u6bc1\u65f6\u6267\u884c\u4ee3\u7801<\/li>
                                          • unmount<\/strong>\u8fc7\u7684\u7ec4\u4ef6\u4e0d\u4f1a\u518d\u6b21\u6302\u8f7d<\/li><\/ul><\/li><\/ul>\n\n\n\n
                                            <\/p>\n","protected":false},"excerpt":{"rendered":"
                                            class\u7ec4\u4ef6\u7684\u521b\u5efa\u65b9\u5f0f \u7c7b\u7ec4\u4ef6\u4e2dprops\u7684\u4f7f\u7528 \u7c7b\u7ec4\u4ef6\u4e2dstate\u7684\u4f7f\u7528 \u7c7b\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f 1. clas […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-211","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=211"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/211\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}