生命周期应用技巧
- 在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…
常见谬误解决技巧
- 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)}/>
发表回复