{"id":2924,"date":"2017-11-15T17:03:51","date_gmt":"2017-11-15T09:03:51","guid":{"rendered":"http:\/\/www.daliane.com\/?p=2924"},"modified":"2017-11-15T17:48:33","modified_gmt":"2017-11-15T09:48:33","slug":"react_zhong_de_shi_jian_chu_li","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/react_zhong_de_shi_jian_chu_li\/","title":{"rendered":"React\u4e2d\u7684\u4e8b\u4ef6\u5904\u7406"},"content":{"rendered":"<p style=\"font-family:&quot;color:#333333;background-color:#FFFFFF;font-size:15px !important;\">\n\tReact \u5143\u7d20\u7684\u4e8b\u4ef6\u5904\u7406\u548c DOM\u5143\u7d20\u7684\u5f88\u76f8\u4f3c\u3002\u4f46\u662f\u6709\u4e00\u70b9\u8bed\u6cd5\u4e0a\u7684\u4e0d\u540c:\n<\/p>\n<ul style=\"font-size:14px;font-family:&quot;background-color:#FFFFFF;\">\n<li style=\"font-size:15px;\">\n\t\tReact\u4e8b\u4ef6\u7ed1\u5b9a\u5c5e\u6027\u7684\u547d\u540d\u91c7\u7528\u9a7c\u5cf0\u5f0f\u5199\u6cd5\uff0c\u800c\u4e0d\u662f\u5c0f\u5199\u3002\n\t<\/li>\n<li style=\"font-size:15px;\">\n\t\t\u5982\u679c\u91c7\u7528 JSX \u7684\u8bed\u6cd5\u4f60\u9700\u8981\u4f20\u5165\u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u800c\u4e0d\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32(DOM\u5143\u7d20\u7684\u5199\u6cd5)\n\t<\/li>\n<li style=\"font-size:15px;\">\n<p style=\"font-family:&quot;color:#333333;background-color:#FFFFFF;font-size:15px !important;\">\n\t\t\tReact \u4e2d\u7a0d\u7a0d\u6709\u70b9\u4e0d\u540c\uff1a\n\t\t<\/p>\n<div style=\"margin:0px;padding:0px;font-size:14px;font-family:&quot;background-color:#FFFFFF;\">\n<div id=\"highlighter_787168\" class=\"syntaxhighlighter nogutter js\" style=\"padding:0px;margin:0.5em 0px !important;font-size:1em !important;\">\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:928.8px;margin:0px !important;padding:0px !important;font-size:14px !important;font-family:Consolas, &quot;border:0px !important;background:none !important;height:auto !important;\" class=\"ke-zeroborder\">\n<tbody>\n<tr>\n<td class=\"code\" style=\"font-size:14px !important;font-family:Consolas, &quot;border:0px !important;vertical-align:baseline !important;background:none !important;\">\n<div class=\"container\" style=\"margin:0px !important;padding:10px !important;background:none #F8F8F8 !important;border:0px !important;vertical-align:baseline !important;\">\n<div class=\"line number1 index0 alt2\" style=\"margin:0px !important;padding:0px 1em 0px 0em !important;border:0px !important;vertical-align:baseline !important;\">\n\t\t\t\t\t\t\t\t\t\t&lt;button onclick=&#8221;{activateLasers}&#8221;&gt;\n\t\t\t\t\t\t\t\t\t<\/div>\n<div class=\"line number2 index1 alt1\" style=\"margin:0px !important;padding:0px 1em 0px 0em !important;border:0px !important;vertical-align:baseline !important;\">\n\t\t\t\t\t\t\t\t\t\t&nbsp;&nbsp;Activate Lasers\n\t\t\t\t\t\t\t\t\t<\/div>\n<div class=\"line number3 index2 alt2\" style=\"margin:0px !important;padding:0px 1em 0px 0em !important;border:0px !important;vertical-align:baseline !important;\">\n\t\t\t\t\t\t\t\t\t\t&lt;\/button&gt;\n\t\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<\/p><\/div>\n<p><span style=\"color:#333333;font-family:&quot;font-size:15px;background-color:#FFFFFF;\">\u5728 React \u4e2d\u53e6\u4e00\u4e2a\u4e0d\u540c\u662f\u4f60\u4e0d\u80fd\u4f7f\u7528\u8fd4\u56de false \u7684\u65b9\u5f0f\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a<\/span>\n\t<\/li>\n<\/ul>\n<p><span style=\"font-size:15px;font-family:&quot;background-color:#FFFFFF;\"> <\/p>\n<pre class=\"prettyprint lang-js\">function ActionLink() {\r\n  function handleClick(e) {\r\n    e.preventDefault();\r\n    console.log('The link was clicked.');\r\n  }\r\n \r\n  return (\r\n    &lt;a href=\"#\" onclick=\"{handleClick}\"&gt;\r\n      Click me\r\n    &lt;\/a&gt;\r\n  );\r\n}<\/pre>\n<p style=\"font-family:&quot;color:#333333;background-color:#FFFFFF;font-size:15px !important;\">\n\t\u4f7f\u7528 React \u7684\u65f6\u5019\u901a\u5e38\u4f60\u4e0d\u9700\u8981\u4f7f\u7528 addEventListener \u4e3a\u4e00\u4e2a\u5df2\u521b\u5efa\u7684 DOM \u5143\u7d20\u6dfb\u52a0\u76d1\u542c\u5668\u3002\u4f60\u4ec5\u4ec5\u9700\u8981\u5728\u8fd9\u4e2a\u5143\u7d20\u521d\u59cb\u6e32\u67d3\u7684\u65f6\u5019\u63d0\u4f9b\u4e00\u4e2a\u76d1\u542c\u5668\u3002\n<\/p>\n<p style=\"font-family:&quot;color:#333333;background-color:#FFFFFF;font-size:15px !important;\">\n\t\u5f53\u4f60\u4f7f\u7528 ES6 class \u8bed\u6cd5\u6765\u5b9a\u4e49\u4e00\u4e2a\u7ec4\u4ef6\u7684\u65f6\u5019\uff0c\u4e8b\u4ef6\u5904\u7406\u5668\u4f1a\u6210\u4e3a\u7c7b\u7684\u4e00\u4e2a\u65b9\u6cd5\u3002\u4f8b\u5982\uff0c\u4e0b\u9762\u7684 Toggle \u7ec4\u4ef6\u6e32\u67d3\u4e00\u4e2a\u8ba9\u7528\u6237\u5207\u6362\u5f00\u5173\u72b6\u6001\u7684\u6309\u94ae\uff1a\n<\/p>\n<p style=\"font-family:&quot;color:#333333;background-color:#FFFFFF;font-size:15px !important;\">\n\t\n<\/p>\n<p style=\"font-family:&quot;color:#333333;background-color:#FFFFFF;font-size:15px !important;\">\n\t\n<\/p>\n<pre class=\"prettyprint lang-js\">import React, { Component } from 'react';\r\n\r\nclass LikeButton extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        \/\/ \u8bbe\u7f6e initial state\r\n        this.state = {\r\n            liked: { liked: false }\r\n        };\r\n\r\n        \/\/ ES6 \u7c7b\u4e2d\u51fd\u6570\u5fc5\u987b\u624b\u52a8\u7ed1\u5b9a\r\n        this.handleClick = this.handleClick.bind(this);\r\n    }\r\n    componentWillMount() {\r\n        console.log('Component WILL MOUNT!\u5728\u6e32\u67d3\u524d\u8c03\u7528,\u5728\u5ba2\u6237\u7aef\u4e5f\u5728\u670d\u52a1\u7aef')\r\n    }\r\n    componentDidMount() {\r\n        console.log('Component DID MOUNT!\u5728\u7b2c\u4e00\u6b21\u6e32\u67d3\u540e\u8c03\u7528\uff0c\u53ea\u5728\u5ba2\u6237\u7aef')\r\n    }\r\n    componentWillReceiveProps(newProps) {\r\n        console.log('Component WILL RECEIVE PROPS!\u5728\u7ec4\u4ef6\u63a5\u6536\u5230\u4e00\u4e2a\u65b0\u7684prop\u65f6\u88ab\u8c03\u7528')\r\n    }\r\n    shouldComponentUpdate(newProps, newState) {\r\n        console.log(\"shouldComponentUpdate\u8fd4\u56de\u4e00\u4e2a\u5e03\u5c14\u503c\u3002\u5728\u7ec4\u4ef6\u63a5\u6536\u5230\u65b0\u7684props\u6216\u8005state\u65f6\u88ab\u8c03\u7528\");\r\n        return true;\r\n    }\r\n    componentWillUpdate(nextProps, nextState) {\r\n        console.log('Component WILL UPDATE!\u5728\u7ec4\u4ef6\u63a5\u6536\u5230\u65b0\u7684props\u6216\u8005state\u4f46\u8fd8\u6ca1\u6709render\u65f6\u88ab\u8c03\u7528');\r\n    }\r\n    componentDidUpdate(prevProps, prevState) {\r\n        console.log('Component DID UPDATE\u5728\u7ec4\u4ef6\u5b8c\u6210\u66f4\u65b0\u540e\u7acb\u5373\u8c03\u7528!')\r\n    }\r\n    componentWillUnmount() {\r\n        console.log('Component WILL UNMOUNT\u5728\u7ec4\u4ef6\u4ece DOM \u4e2d\u79fb\u9664\u7684\u65f6\u5019\u7acb\u523b\u88ab\u8c03\u7528!')\r\n    }\r\n    handleClick(event) {\r\n        this.setState({\r\n            liked: !this.state.liked\r\n        });\r\n        this.refs.myInput.value = \"\u54c8\u54c8\uff0c\u597d\u7528\u4e86\uff01\";\r\n        \/\/ this.state = { liked: !this.state.liked };\r\n    }\r\n    render() {\r\n\r\n        let text = this.state.liked ? '\u559c\u6b22' : '\u4e0d\u559c\u6b22';\r\n        return ( &lt; div &gt; &lt; input type = \"text\"\r\n            ref = \"myInput\" \/ &gt; &lt; button onClick = {\r\n                this.handleClick\r\n            } &gt; {\r\n                text\r\n            } &lt; \/button&gt;&lt;\/div &gt; );\r\n    }\r\n}\r\n\r\nexport default LikeButton<\/pre>\n<p>\n\t\n<\/p>\n<p><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React \u5143\u7d20\u7684\u4e8b\u4ef6\u5904\u7406\u548c DOM\u5143\u7d20\u7684\u5f88\u76f8\u4f3c\u3002\u4f46\u662f\u6709\u4e00\u70b9\u8bed\u6cd5\u4e0a\u7684\u4e0d\u540c: React\u4e8b\u4ef6\u7ed1\u5b9a\u5c5e\u6027\u7684\u547d\u540d\u91c7\u7528\u9a7c&#8230;<\/p>\n","protected":false},"author":2,"featured_media":228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38],"tags":[196],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2924"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=2924"}],"version-history":[{"count":3,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2924\/revisions"}],"predecessor-version":[{"id":2927,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2924\/revisions\/2927"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=2924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=2924"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=2924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}