编写react组件最佳实践

}

// onChange={(e) => { model.name = e.target.value }}

// ^ 不要如许写，按如下写法：

onChange={this.handleChange}

placeholder="Your Name"/>

Class Based Components (基于类的组件)

原因在于：每次父组件从新衬着时，都邑创建一个新的函数，并传给input。

编写react组件最佳实践

如不雅这个input是个react组件的话，这会导致无论该组件的其他属性是否变更，该组件都邑从新render。

并且，采取将父组件的办法传入的方法也会使得代码更易读，便利调试，同时也轻易修改。

完全代码如下：

import React, { Component } from 'react' 
import { observer } from 'mobx-react' 
import { string, object } from 'prop-types' 
// Separate local imports from dependencies 
import ExpandableForm from './ExpandableForm' 
import './styles/ProfileContainer.css' 
 
// Use decorators if needed 
@observer 
export default class ProfileContainer extends Component { 
  state = { expanded: false } 
  // Initialize state here (ES7) or in a constructor method (ES6) 
  
  // Declare propTypes as static properties as early as possible 
  static propTypes = { 
    model: object.isRequired, 
    title: string 
  } 
 
  // Default props below propTypes 
  static defaultProps = { 
    model: { 
      id: 0 
    }, 
    title: 'Your Name' 
  } 
 
  // Use fat arrow functions for methods to preserve context (this will thus be the component instance) 
  handleSubmit = (e) => { 	
			 5/9   首页 上一页 3 4 5 6 7 8 下一页 尾页	
			

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


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