cage1618 / stateless-demo

react stateless component

start

npm i -g create-react-app
git clone [e-mail]:chuhanan/stateless-demo.git

what is stateless component?

version:react 0.14+

• 一个纯函数返回一个组件

import React from 'react';
const StateLess = ( props, context ) => {
  console.log( props, context )
  return <div>
    <p>props:{props.title}</p>
    <p>this is a stateless component </p>
  </div>
}

export default StateLess

why stateless

• 没有状态(state),
• 只有一个render函数
• 纯粹的接收父组件的props直接渲染UI
• 函数返回UI组件,没有class就少了this,constructor继承关系等,代码更加简洁,便于理解和测试;
• 无状态组件不会在调用时创建新的实例,在创建的时候始终是一个实例,避免了不必要的检查和内存分配,做到了内部优化

careful

• 调用不实例化(没有ref属性),没有生命周期(也就是没有shouldComponentUpdate?那每次都re-render组件存在性能问题??)

compare