react-bits：无状态函数组件

来源：互联网发布：中国历届人口普查数据编辑：程序博客网时间：2024/05/23 20:50

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

import {PropTypes, ContextTypes} from "react";const Greeting = () => <div>Hi there!</div>;// They get passed props and contextconst 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};

0 0