乐趣区

关于javascript:react使用技巧

生命周期应用技巧

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