react-bits:无状态函数组件

前端之家收集整理的这篇文章主要介绍了react-bits:无状态函数组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

react-bits
原文
无状态函数是一种很有用的定义高可复用组件的方法
他们不拥有状态,只是函数
使用函数的优点是视图和逻辑的分离,由于没有内部的状态处理和逻辑,视图和逻辑的分离更为彻底。
无状态函数组件因为没有状态和生命周期函数性能得以提升,react团队在未来的版本将会避免无意义的检查和内存分配

import {PropTypes,ContextTypes} from "react";

const Greeting = () => <div>Hi there!</div>;

// They get passed props and context
const Greeting = (props,context) =>
  <div style={{color: context.color}}>Hi {props.name}</div>;

// They can define a local variable,when a function block is used.
const Greeting = (props,context) => {
  const style = {
    fontWeight: "bold",color: context.color
  };

  return <div style={style}>{props.name}</div>
};

// But you could get the same result by using other functions.
const getStyle = context => ({
  fontWeight: "bold",color: context.color
});

const Greeting = (props,context) =>
  <div style={getStyle(context)}>{props.name}</div>;

// They can have defined defaultProps,propTypes and contextTypes.

Greeting.propTypes = {
  name: PropTypes.string.isrequired
};
Greeting.defaultProps = {
  name: "Guest"
};
Greeting.contextTypes = {
  color: PropTypes.string
};

猜你在找的React相关文章