recompose 模块可以帮助”提升”很多无状态的模块
you take a stateless component, and without creating any class, you enhance it to provide a state and your return the new component, that is "enhanced".安装
npm install –save recompose
说明文档
https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate
import React, { Component } from "react";
import { withState, withProps } from "recompose";
const Helloworld = withState("query", "update", "default value")(
({ query, update, ...props }) => {
const handleClick = values => {
update("Lizhe");
};
return (
<div>
hello world , {query}
<button onClick={handleClick}>Click me</button>
</div>
);
}
);
export default Helloworld;
Helloworld 本身是一个stateless的组件, 通过withState(“query”, “update”, “default value”) 可以为其添加一个state
query是这个属性的key, update是一个方法的引用, default value是默认值
<button onClick={handleClick}>Click me</button> 点击按钮之后update方法就会被调用, 然后使用”Lizhe”这个值替换”default value”这个值
update(“Lizhe”);
运行起来的效果是这样的
