React recompose

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”);

运行起来的效果是这样的