\u6211\u4eec\u77e5\u9053\u662f\u4e0d\u80fd\u591f\u4fee\u6539this.state\u91cc\u9762\u7684\u6570\u636e\u7684<\/p>\n
\u4e3e\u4e2a\u4f8b\u5b50<\/p>\n
export class App extends React.PureComponent{
\n constructor(){
\n super();
\n this.state = {
\n userList:[
\n {name : "tom" , age : 18},
\n {name : "lily" , age : 20},
\n {name : "tiki" , age : 18},
\n ]<\/p>\n
}
\n }
\n render(){
\n const userList =this.state.userList
\n return (
\n <div>
\n <ul>
\n {
\n userList.map((item , index , arr) => {
\n return (
\n <li key={index}>{item.name} + {item.age}<\/li>
\n )<\/p>\n
})
\n }
\n <\/ul>
\n <button onClick={() => this.addNewUser()}>\u70b9\u51fb\u6dfb\u52a0<\/button>
\n <\/div>
\n )
\n }<\/p>\n
\u4e0d\u63a8\u8350\u7684\u505a\u6cd5：<\/p>\n
const newData = {name : "hcy" , age : 19}
\n this.state.userList.push(newData);
\n this.setState({
\n userList:this.state.userList
\n })<\/p>\n
\u56e0\u4e3a\u6211\u4eec\u4fee\u6539\u4e86state\u91cc\u9762\u7684\u6570\u636e，\u4f46\u662f\u8fd9\u79cd\u65b9\u5f0f\u76f4\u63a5\u4fee\u6539\u539f\u6570\u7ec4，\u4e0d\u7b26\u5408 React \u7684\u4e0d\u53ef\u53d8\u6027\u539f\u5219<\/p>\n
\u6211\u4eec\u7684APP\u7ee7\u627f\u4e86PureComponent，\u5b83\u6709shouldcomponnets\u65b9\u6cd5，\u8fd9\u4e2a\u65b9\u6cd5\u5fc5\u987b\u53d1\u751f\u6539\u53d8\u624d\u4f1a\u6267\u884c，\u4f46\u662f\u6211\u4eec\u8fd9\u6837\u7684\u65b9\u6cd5\u6307\u5411\u540c\u4e00\u4e2a\u5730\u5740(\u76f8\u540c)\u6240\u4ee5\u662f\u4e0d\u4f1a\u6539\u53d8\u7684<\/p>\n
**\u63a8\u8350\u505a\u6cd5：**\u4e0d\u8981\u76f4\u63a5\u4fee\u6539 state，\u5e94\u8be5\u7528\u65b0\u6570\u7ec4\u3002<\/p>\n
const newData = {name : "hcy" , age : 19}
\n this.setState({
\n userList:[…this.state.userList , newData]\/\/\u4e0d\u8981\u76f4\u63a5\u4fee\u6539 state，\u5e94\u8be5\u7528\u65b0\u6570\u7ec4\u3002
\n })<\/p>\n
\u5f00\u53d1\u4e2d\u8de8\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4e8b\u4ef6\u4f20\u9012，\u4f7f\u7528events<\/p>\n
\u901a\u8fc7npm\u6216\u8005yarn\u6765\u5b89\u88c5events<\/p>\n
npm add events<\/p>\n
events\u5e38\u7528\u7684API：<\/p>\n
\u4e8b\u4ef6\u6f14\u7ec3：<\/p>\n
import React, { PureComponent } from 'react'
\nimport {EventEmitter} from 'events'
\n\/\/ \u9700\u6c42：\u70b9\u51fbprofile\u4e2d\u7684\u6309\u94ae->\u8fdb\u884c\u8de8\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4e8b\u4ef6\u4f20\u9012
\n\/\/ 1\u3001\u521b\u5efaEventEmitter\u5bf9\u8c61：eventBus\u5bf9\u8c61
\nconst evebtBus = new EventEmitter();<\/p>\n
export default class App extends PureComponent {
\n render() {
\n return (
\n <div>
\n <Header \/>
\n <Profile\/>
\n <\/div>
\n )
\n }
\n}
\nclass Header extends PureComponent{
\n \/\/ \u8fdb\u884c\u76d1\u542c
\n componentDidMount(){
\n \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c
\n \/\/ 3\u3001\u76d1\u542c\u4e8b\u4ef6：eventBus.addListener("\u4e8b\u4ef6\u540d\u79f0", \u76d1\u542c\u51fd\u6570)；
\n \/\/ (eventName: string | symbol, listener: (…args: any[]) => void):
\n \/\/ this.handleSayHelloListener：\u6ca1\u6709\u62ec\u53f7，\u56e0\u4e3a\u662f\u51fd\u6570
\n evebtBus.addListener("sayHello" , this.handleSayHelloListener)
\n }
\n componentWillUnmount(){
\n \/\/ \u53d6\u6d88\u4e8b\u4ef6\u76d1\u542c
\n \/\/ (…args: any[]) => void)
\n \/\/ 4\u3001 \u79fb\u9664\u4e8b\u4ef6：eventBus.removeListener("\u4e8b\u4ef6\u540d\u79f0", \u76d1\u542c\u51fd\u6570)；
\n evebtBus.removeListener("sayHello" ,this.handleSayHelloListener)
\n }
\n \/\/ …args
\n \/\/ \u591a\u4e2a\u53c2\u6570\u8981\u5199\u591a\u4e2a\u5f62\u53c2
\n handleSayHelloListener(str , num){
\n console.log(str + num);
\n }
\n render (){
\n return (
\n <div>
\n Hello World
\n <\/div>
\n )
\n }
\n}
\nclass Profile extends PureComponent{
\n render (){
\n return(
\n <div>
\n Hello Profile
\n <button onClick={() => this.emmitEvent()}>\u70b9\u51fbProfile<\/button>
\n <\/div>
\n )
\n }
\n\/\/ 2\u3001\u53d1\u51fa\u4e8b\u4ef6：eventBus.emit("\u4e8b\u4ef6\u540d\u79f0", \u53c2\u6570\u5217\u8868);
\n emmitEvent(){
\n evebtBus.emit("sayHello" , "Hello Home" , 123)
\n }
\n}<\/p>\n
import React, { PureComponent } from 'react';
\nimport Pure from '.\/Pure';
\nexport default class App extends PureComponent {
\n constructor() {
\n super();
\n this.titleRef = React.createRef();
\n this.titleEle = null;
\n }<\/p>\n
render() {
\n return (
\n <div>
\n {\/* 1\u3001React.createRef() *\/}
\n <h2 ref={this.titleRef} >Hello World<\/h2>
\n {\/* 2\u3001\u4f20\u5165\u4e00\u4e2a\u51fd\u6570 *\/}
\n <h2 ref={(args) => this.titleEle = args}>Hello World<\/h2>
\n <button onClick={() => this.changeRef()}>\u70b9\u51fb\u5207\u6362<\/button>
\n <\/div>
\n );
\n }<\/p>\n
changeRef() {
\n this.titleRef.current.innerHTML = "Hello React";
\n this.titleEle.innerHTML = "Hello React"
\n }
\n appAdd(){
\n console.log(this.pureRef.current.btnAdd());
\n }
\n}<\/p>\n
ref \u7684\u503c\u6839\u636e\u8282\u70b9\u7684\u7c7b\u578b\u800c\u6709\u6240\u4e0d\u540c：<\/p>\n
\u4e3e\u4e00\u4e2a\u7ec4\u4ef6\u4e0a\u4f7f\u7528ref\u7684\u4f8b\u5b50：<\/p>\n
\/\/ \u7ec4\u4ef6\u7684ref
\n this.pureRef = React.createRef();
\n {\/* 3\u3001\u5f53 ref \u5c5e\u6027\u7528\u4e8e\u81ea\u5b9a\u4e49 class \u7ec4\u4ef6\u65f6，ref \u5bf9\u8c61\u63a5\u6536\u7ec4\u4ef6\u7684\u6302\u8f7d\u5b9e\u4f8b\u4f5c\u4e3a\u5176 current \u5c5e\u6027； *\/}
\n <Pure ref={this.pureRef}\/>
\n <button onClick={() => this.appAdd()}>app+1<\/button><\/p>\n
\u53d7\u63a7\u7ec4\u4ef6\u662f\u5355\u5143\u7d20（\u5982<input>\u3001<textarea>\u7b49）\u7684\u503c\u7531React\u7684state\u8fdb\u884c\u201c\u63a7\u5236\u201d，\u5373\u7ec4\u4ef6\u7684\u72b6\u6001（state）\u662f\u552f\u4e00\u6570\u636e\u6e90\u3002<\/p>\n
import React, { PureComponent } from 'react'<\/p>\n
export default class App extends PureComponent {
\n constructor(){
\n super();
\n this.state = {
\n username:""
\n }
\n }
\n render() {
\n return (
\n <div>
\n <form>
\n <input
\n type='text'
\n value={this.state.username}
\n onChange={(e) => this.handleChange(e)}
\n \/>
\n <input
\n type='submit'
\n onClick={(e) => this.handleSubmit(e)}
\n \/>
\n <\/form>
\n <\/div>
\n )<\/p>\n
}
\n handleSubmit(event){
\n event.preventDefault();
\n console.log("\u63d0\u4ea4\u5185\u5bb9：",this.state.username)
\n }
\n handleChange(event){
\n this.setState({
\n username:event.target.value
\n })<\/p>\n
}
\n}<\/p>\n
<input> \u7684 value \u5c5e\u6027\u7ed1\u5b9a\u4e86 this.state.username，\u8f93\u5165\u6846\u7684\u5185\u5bb9\u53ea\u80fd\u901a\u8fc7 setState \u6765\u6539\u53d8\u3002\u6bcf\u5f53\u7528\u6237\u8f93\u5165\u5185\u5bb9\u65f6，onChange \u4e8b\u4ef6\u4f1a\u89e6\u53d1 handleChange，\u8fdb\u800c\u66f4\u65b0 state，React \u518d\u628a\u6700\u65b0\u7684 state \u8d4b\u503c\u7ed9 input \u7684 value\u3002<\/p>\n
\u603b\u7ed3： \u53d7\u63a7\u7ec4\u4ef6\u7684\u8f93\u5165\u503c\u53d7 React \u7ec4\u4ef6\u7684 state \u63a7\u5236，React \u8d1f\u8d23\u7ba1\u7406\u548c\u540c\u6b65\u8868\u5355\u6570\u636e，\u8fd9\u5c31\u662f\u201c\u53d7\u63a7\u201d\u7684\u542b\u4e49\u3002<\/p>\n
\u5176\u4ed6\u53d7\u63a7\u901a\u8fc7\u7ec4\u4ef6：\u6bd4\u5982select<\/p>\n
import React, { PureComponent } from 'react'<\/p>\n
export default class App extends PureComponent {
\n constructor(){
\n super();
\n this.state = {
\n fruit:"apple"\/\/\u9ed8\u8ba4\u4e3a\u82f9\u679c
\n }
\n }
\n render() {
\n return (
\n <div>
\n <form onSubmit={(e) => this.handleSubmit(e)}>
\n {\/* \u9009\u62e9\u5668 *\/}
\n <select
\n value={this.state.fruit}
\n name='fruits'
\n onChange={(e) => this.handleChange(e)}>
\n <option value="apple">\u82f9\u679c<\/option>
\n <option value="oringe">\u6a58\u5b50<\/option>
\n <option value="bannana">\u9999\u8549<\/option>
\n <\/select>
\n <\/form>
\n <\/div>
\n )<\/p>\n
}
\n handleSubmit(event){
\n event.preventDefault();
\n console.log("\u63d0\u4ea4\u5185\u5bb9：",this.state.fruit)
\n }
\n handleChange(event){
\n this.setState({
\n fruit:event.target.value
\n })<\/p>\n
}
\n}<\/p>\n
\u53d7\u63a7\u7ec4\u4ef6\u2014\u591a\u8f93\u5165<\/p>\n
\u8981\u662f\u4e0d\u62bd\u53d6\u4ee3\u7801\u5c31\u4f1a\u5f88\u5197\u4f59<\/p>\n
import React, { PureComponent } from 'react'<\/p>\n
export default class App extends PureComponent {
\n constructor(){
\n super();
\n this.state = {
\n username:"",
\n password:""
\n }
\n }
\n render() {
\n return (
\n <div>
\n <form>
\n <input
\n type='text'
\n name='username'
\n value={this.state.username}
\n onChange={(e) => this.handleChange(e)}
\n \/>
\n <input
\n name='password'
\n type='password'
\n value={this.state.password}
\n onChange={(e) => this.handleChange(e)}
\n \/>
\n <input
\n type='submit'
\n onClick={(e) => this.handleSubmit(e)}
\n \/>
\n <\/form>
\n <\/div>
\n )<\/p>\n
}
\n handleSubmit(event){
\n event.preventDefault();
\n const {username , password } = this.state;
\n console.log("\u63d0\u4ea4\u5185\u5bb9：",username , password )
\n }
\n\/\/ handleusernameChange(event){
\n\/\/ this.setState({
\n\/\/ username:event.target.value
\n\/\/ })<\/p>\n
\/\/ }
\n\/\/ handlepasswordChange(event){
\n\/\/ this.setState({
\n\/\/ password:event.target.value
\n\/\/ })<\/p>\n
\/\/ }
\n handleChange(event){
\n this.setState({
\n [event.target.name] : event.target.value
\n })<\/p>\n
}
\n\/\/ \u6211\u4eec\u53ef\u4ee5\u628ahandleChange\u5199\u4e3a\u4e00\u4e2a，\u56e0\u4e3a\u5979\u4eec\u7684\u6837\u5f0f\u662f\u90fd\u662f：
\n\/\/ handle{key}Change(event){
\n\/\/ this.setState({
\n\/\/ {key}:event.target.value
\n\/\/ })<\/p>\n
\/\/ }
\n\/\/ \u6211\u4eec\u53ea\u9700\u8981\u52a8\u6001\u66f4\u65b0key\u5c31\u597d
\n\/\/ 1\u3001input\u8bbe\u7f6ename
\n\/\/ 2\u3001event.target.name\u5f97\u5230\u4e0d\u540c\u7684key
\n}<\/p>\n
\u5982\u679c\u8981\u4f7f\u7528\u975e\u53d7\u63a7\u7ec4\u4ef6\u4e2d\u7684\u6570\u636e，\u90a3\u4e48\u6211\u4eec\u9700\u8981\u4f7f\u7528 ref \u6765\u4eceDOM\u8282\u70b9\u4e2d\u83b7\u53d6\u8868\u5355\u6570\u636e\u3002<\/p>\n
\u5728\u975e\u53d7\u63a7\u7ec4\u4ef6\u4e2d\u901a\u5e38\u4f7f\u7528defaultValue\u6765\u8bbe\u7f6e\u9ed8\u8ba4\u503c；<\/p>\n
import React, { createRef, PureComponent } from 'react'<\/p>\n
export default class App extends PureComponent {
\n constructor(){
\n super();
\n this.nameRef = createRef()\/\/\u521b\u5efaref\u5bf9\u8c61
\n }
\n render() {
\n return (
\n <div>
\n <form>
\n <input
\n type='text'
\n ref={this.nameRef}\/\/\u7ed1\u5b9aref
\n \/>
\n <input
\n type='submit'
\n onClick={ this.handleSubmit}
\n \/>
\n <\/form>
\n <\/div>
\n )<\/p>\n
}
\n handleSubmit = (event) => {
\n event.preventDefault();
\n console.log("\u63d0\u4ea4\u5185\u5bb9：",this.nameRef.current.value)
\n }\/\/\u7bad\u5934\u51fd\u6570
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb679\u6b21\u3002\u4eca\u5929\u4e3b\u8981\u5b66\u4e60\u4e86\u4e0d\u53ef\u53d8\u6570\u636e\u3001\u5168\u5c40\u4e8b\u4ef6\u4f20\u9012\u548c\u53d7\u63a7\u7ec4\u4ef6\u3002\u5728\u4e0d\u53ef\u53d8\u6570\u636e\u90e8\u5206\uff0c\u5f3a\u8c03\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539state\uff0c\u63a8\u8350\u4f7f\u7528\u65b0\u6570\u7ec4\u66ff\u4ee3\u539f\u6570\u7ec4\u6765\u7ef4\u62a4\u6570\u636e\u4e0d\u53ef\u53d8\u6027\u3002\u901a\u8fc7EventEmitter\u5b9e\u73b0\u8de8\u7ec4\u4ef6\u4e8b\u4ef6\u901a\u4fe1\uff0c\u4e5f\u76f4\u63a5\u6572\u4e86\u4e8b\u4ef6\u76d1\u542c\u4e0e\u89e6\u53d1\u7684\u5b8c\u6574\u6d41\u7a0b\u3002\u6700\u540e\u5b66\u4e60\u4e86\u53d7\u63a7\u7ec4\u4ef6\u7684\u5b9e\u73b0\u65b9\u5f0f\uff0c\u5373\u8868\u5355\u5143\u7d20\u503c\u7531React state\u63a7\u5236\u3002<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2332,524,4195,87],"topic":[],"class_list":["post-44652","post","type-post","status-publish","format-standard","hentry","category-server","tag-arcgis","tag-react-js","tag-react","tag-87"],"yoast_head":"\n