\n\tReact \u652f\u6301\u4e00\u79cd\u975e\u5e38\u7279\u6b8a\u7684\u5c5e\u6027 Ref<\/b> \uff0c\u4f60\u53ef\u4ee5\u7528\u6765\u7ed1\u5b9a\u5230 render() \u8f93\u51fa\u7684\u4efb\u4f55\u7ec4\u4ef6\u4e0a\u3002\n<\/p>\n
\n\t\u8fd9\u4e2a\u7279\u6b8a\u7684\u5c5e\u6027\u5141\u8bb8\u4f60\u5f15\u7528 render() \u8fd4\u56de\u7684\u76f8\u5e94\u7684\u652f\u6491\u5b9e\u4f8b\uff08 backing instance \uff09\u3002\u8fd9\u6837\u5c31\u53ef\u4ee5\u786e\u4fdd\u5728\u4efb\u4f55\u65f6\u95f4\u603b\u662f\u62ff\u5230\u6b63\u786e\u7684\u5b9e\u4f8b\u3002\n<\/p>\n
\n\t\n<\/p>\n
\n\t\u8fd9\u79cd\u7279\u6027\uff0c\u8ba9\u6211\u60f3\u5230\u4e86jquery\u4e2d\u7684$\u7b26\u53f7\u3002\u867d\u7136\u4e24\u8005\u6709\u672c\u8d28\u7684\u533a\u522b\u7684\uff0c\u4f46\u8d77\u5230\u7684\u4f5c\u7528\uff0c\u597d\u50cf\u662f\u4e00\u6837\u7684\u3002\n<\/p>\n
\n\t\n<\/p>\n
\n\t\n<\/p>\n
\n\t\u7ed1\u5b9a\u4e00\u4e2a ref \u5c5e\u6027\u5230 render \u7684\u8fd4\u56de\u503c\u4e0a\uff1a\n<\/p>\n
<input<\/span> <\/span>ref<\/span>=<\/span>\"myInput\"<\/span> <\/span>\/><\/span><\/pre>\n\n\t\u5728\u5176\u5b83\u4ee3\u7801\u4e2d\uff0c\u901a\u8fc7 this.refs \u83b7\u53d6\u652f\u6491\u5b9e\u4f8b:\n<\/p>\n
var<\/span> input <\/span>=<\/span> <\/span>this<\/span>.<\/span>refs<\/span>.<\/span>myInput<\/span>;<\/span> <\/span>var<\/span> inputValue <\/span>=<\/span> input<\/span>.<\/span>value<\/span>;<\/span> <\/span>var<\/span> inputRect <\/span>=<\/span> input<\/span>.<\/span>getBoundingClientRect<\/span>();<\/span><\/pre>\n\u4e0b\u9762\u662f\u4e00\u4e2a\u5177\u4f53\u7684\u4f8b\u5b50\uff1a<\/p>\n
\n\t\n<\/p>\n
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 ( < div > < input type = \"text\"\r\n ref = \"myInput\" \/ > < button onClick = {\r\n this.handleClick\r\n } > {\r\n text\r\n } < \/button><\/div > );\r\n }\r\n}\r\n\r\nexport default LikeButton<\/pre>\n\n\t<\/p>\n","protected":false},"excerpt":{"rendered":"
React \u652f\u6301\u4e00\u79cd\u975e\u5e38\u7279\u6b8a\u7684\u5c5e\u6027 Ref \uff0c\u4f60\u53ef\u4ee5\u7528\u6765\u7ed1\u5b9a\u5230 render() \u8f93\u51fa\u7684\u4efb…<\/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,60],"tags":[],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2918"}],"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=2918"}],"version-history":[{"count":2,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2918\/revisions"}],"predecessor-version":[{"id":2920,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2918\/revisions\/2920"}],"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=2918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=2918"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=2918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}