React Hooks的支持

从nanachi 1.2.3开始，我们引入对React Hooks的支持。所谓React Hooks，就是在无状态组件的方法体里面添加几个内置方法，实现只有原有状态组件才能实现的功能。

  • 自更新能力（setState，使用useState，它会返回一个数组，一个是新数据，一个是更新数据的方法），
  • 访问context(使用useContext)，
  • 使用更高级的setState设置（useReducer）
  • 更新完的回调（useEffect）
  • setState的升级版， useCallback
  • useMemo，取得上次缓存的数据，它可以说是useCallback的另一种形式。
    目前就支持这6种，其他三种或与ref有关，或与渲染时期有关，对小程序没有什么意思就不支持了。

在开始之前，我们还需要深入理解一下的无状态组件。 有的无状态组件是会返回text, div这些构建界面的标签，它们应该放到components目录下，有的无状态组件则直接返回另一个组件或props.children，那么应该放到common目录下，比如<React.Fragment />或var ThemeContext = React.createContext(); <ThemeContext.Provider />

注意：由于小程序的语法限制，无法实现props render, 因此也无法使用Context.Consumer，你只能用useContext或static contextType

下面是一个简单的例子：

我们用nanachi建立一个hello world模块（最后那个），改写pages/index/index.js

  1. import React from '@react';
  2. import {GlobalTheme} from '@common/GlobalTheme/index';
  3. import Layout from '@components/Layout/index';
  4. import AnotherComponent from '@components/AnotherComponent/index';
  5. import './index.scss';
  6. class P extends React.Component {
  7.     props = {
  8.         anyVar: {color:'red'}
  9.     }
  10.     componentDidMount() {
  11.         // eslint-disable-next-line
  12.         console.log('page did mount!');
  13.     }
  14.     render() {
  15.         return  <div class = 'page' >
  16.                  <GlobalTheme.Provider value={this.props.anyVar}>
  17.                    <Layout>
  18.                        <AnotherComponent />
  19.                    </Layout>
  20.                 </GlobalTheme.Provider>
  21.                 </div>
  22.     }
  23. }
  25. export default P;

common/GlobalTheme/index.js

  1. // eslint-disable-next-line
  2. import React from '@react';
  4. export const GlobalTheme = React.createContext();//它要表示为一个组件，因此必须 大写开头

components/AnotherComponent/index

  1. // eslint-disable-next-line
  2. import React from '@react';
  4. export default function AnotherComponent(){//它要表示为一个组件，因此必须 大写开头
  5.    console.log("AnotherComponent init" )  //debug
  6.     return <div> Foo </div>;
  7.   };

components/Layout/index

  1. import React from '@react';
  2. import {GlobalTheme} from '@common/GlobalTheme/index';
  3. export default function Layout (props) {
  4.     const globalStyle = React.useContext(GlobalTheme);
  5.     console.log("Layout init",globalStyle ) //debug
  6.     return <div style={globalStyle}>{props.children}</div>;
  7. };