乐趣区

关于javascript:react使用技巧

jiezi

生命周期应用技巧

  • 在 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)}/>
退出移动版