生命周期应用技巧

  • 在componentDidMount中去申请数据；
  • 在componentWillMount中最初一次批改state
  • 在应用es6写法的时候在constructor中进行所有函数的绑定；这样子防止了大量批改jsx的可能

props和states应用技巧

props

Props利用不定参传值

 <FormCreat key='form' {...this.props}/>

state

状态汇合尽可能小

状态向上顶的准则
很多时候状态可能被设计成在多个中央去保护，这种状况下就要竟可能的把状态上顶到的父组件中进行对立的保护；

组件状态由上而下越来越少
失常来说组件从父组件到上面一级一级上来，组件中的state应该越来越少才是失常的， 如果子组件中的state比父组件中的state还多，就阐明组件没有拆分好；

JSX技巧

jsx的正文

jsx简而言之就是以js的形式去写html内容，然而当html内容很简单的时候，可读性会变得很差，批改的时候变得老本比拟高，所以正当的正文其实是能够事倍功半的，JSX加正文的办法如下：

 {/*      這是一段     多行註解      */     // 這是一段單行註解 } <input type="text" name="todoText" value={this.state.todoText} onChange={this.handleAddTodoTyping}></input>

form表单

disabled属性
个别的在html中，示意input类型的元素要设置为disaled,须要在元素上设置属性disabled=“disabled”，checked和selected相似，在jsx中反对间接设为true来示意禁用和被选中，如下代码能够做相应的简化；

bad<button   onClick={this.handleAddTodo}   disabled={this.state.todoText === "" ? "disabled" :""}>Add</button>good<button   onClick={this.handleAddTodo}   disabled={this.state.todoText === ""}>Add</button>

循环

个别的在jsx如果存在须要循环输入某个元素的话有两种形式，第一个是在render函数的return外，先利用循环循环输入到一个数组或者对象中，再在return中间接应用这个数组或者对象，如下：

render() {    let list  = this.state.list.map((data.index)=>{        return (            <ListItem data={data}                index={index} key={data.name}                toggleChecked={this.toggleChecked}/>        )    });    return (        <ul> {list} </ul>    );}

另一种如下，其实这两种形式是完全一致，只不过第一种写法在循环元素多的状况下会更加清晰，如果只蕴含一个循环元素能够间接当初return里，代码也更为简洁。

render(    <ul>        {this.state.list.map((data, index)=>{            return (                <ListItem data={data}                    index={index} key={data.name}                    toggleChecked={this.toggleChecked}/>            )        })}    </ul>)

react高性能编程技巧

React.addons.Perf

利用Perf能够用来检测本人程序的性能，能够来检测到底是哪个组件耗时多，能够进行部分的优化来晋升性能

应用shouldComponentUpdate

每个组件都有一个shouldComponentUpdate的API，通过该办法能够判
断以后组件是否须要进行render，如果不做判断，默认组件之后的所有子组件也都须要进行从新渲染；

应用immutable

shouldComponentUpdate中判断this.props和next.props中的值，如
果不雷同才会进行render,这种办法应用在根本类型中是没有问题的，然而如果是援用类型的比拟，因为内存地址是雷同的，所以this.props和next.props是雷同的；
针对这种状况，就是要引入immutable，immutable简言之就是不可变的
数据结构，每一次的数据变动都会产生新的数据对象；

应用无状态组件

 function HelloComponent(props, /* context */) {    return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

调试技巧

在render 办法当前办法中查看被扭转的state的值

state的值常常在render前，如componentWillupdate中去设置，然而在render中可能没有失效， 这时可能想要把state的值打进去检查一下，然而如果在componentWillupdate中去打印，state的值其实还没有发生变化，因为state是个异步函数，他正真失效是在render中，所以要查看扭转后的state，要在render以及在其之后执行的函数中去打印进去；

应用react-dev-tools插件调试

应用react-dev-tools插件能够很分明看到react中Jsx的文档构造；如下图所示

chrome插件地址 ： https://chrome.google.com/web...

常见谬误解决技巧

  1. Uncaught TypeError: Cannot read property 'state' of undefined
  toggleChecked(event){      let list = this.state.list;  }  render(){      return (          <ul>              {this.state.list.map((data, index)=>{               return (                   <ListItem data={data}                      index={index} key={data.name}                      toggleChecked={this.toggleChecked}/>               )           })}         </ul>     );   }

如上所示toggleChecked办法中this.state被报undefined，为什么会这样呢？难到是this外面没有state? 打印进去看看this,貌似是window，而不是react的componet对象；
这是为什么呢，看看咱们组建的申明头

    export default class performanec extends Component

这是es6写法，如果这样做的话，所有自定义的办法要本人bind才能够正确找到this。在es5的写法中是通过react.createClass给所有本人定义的函数绑定了以后的this，不过官网并不倡议这么做，还是本人绑的好，所以批改如下：

 toggleChecked={this.toggleChecked.bind(this)}/>