编写react组件最佳实践

}

在上文的例子中，我们是这么做的：

this.setState({ expanded: !this.state.expanded })

闭包

setState实际是异步履行的，react因为机能原因会将state的变更整合，再一路处理，是以当setState被调用的时刻，state并不必定会急速变更。

这意味着在调用setState的时刻你不克不及依附当前的state值——因为你不克不及确保setState真正被调用的时刻state毕竟是什么。

解决方檀卷是给setState传入一个办法，该办法接收上一次的state作为参数。

this.setState(prevState => ({ expanded: !prevState.expanded })

办法

解构props

import React, { Component } from 'react' 
import { observer } from 'mobx-react' 
import { string, object } from 'prop-types' 
import ExpandableForm from './ExpandableForm' 
import './styles/ProfileContainer.css' 
export default class ProfileContainer extends Component { 
  state = { expanded: false } 
  
  static propTypes = { 
    model: object.isRequired, 
    title: string 
  } 
  
  static defaultProps = { 
    model: { 
      id: 0 
    }, 
    title: 'Your Name' 
  } 
  handleSubmit = (e) => { 
    e.preventDefault() 
    this.props.model.save() 
  } 
   
  handleNameChange = (e) => { 
    this.props.model.changeName(e.target.value) 
  } 
   
  handleExpand = (e) => { 
    e.preventDefault() 
    this.setState(prevState => ({ expanded: !prevState.expanded })) 
  } 
   
  render() { 
    const { 
      model, 
      title 
    } = this.props 
    return (  
      <ExpandableForm  
        onSubmit={this.handleSubmit}  
        expanded={this.state.expanded}  
        onExpand={this.handleExpand}> 
        <div> 	
			 3/9   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　Java反射机制应用实践
            
            引言反射基本p.s: 本文须要读者对反射机制的API有必定程度的懂得，如不雅之前没有接触过的话，建议先看一下官方文档的Quick Start。在应用反射机制之前，起首我们先来看一下若何获取一个对>>>详细阅读


本文标题：编写react组件最佳实践
地址：http://www.17bianji.com/lsqh/35286.html
 1/2    1