React hooks初探

安装

使用脚手架初始化项目：
npx create-react-app my-app

全局方法或属性

index.js
import globalFns from '@/utils/globalFns'
import config from './config'

// 合并全局方法
Object.assign(React, globalFns)
React.$config = config
将方法或者属性合并到React对象上，在其他子页面通过React.xxx就可以访问全局方法或属性

支持less预编译

npm run eject 将项目构建目录暴露出来
npm install less less-loader -D -S 
getStyleLoaders数组中最后加入
  {
    loader: require.resolve('less-loader'),
    options: cssOptions,
  }
因为webpack loader加载顺序是倒序的

局部样式

test.jsx
import React, { useState } from "react";
import { Button } from "./basic/Button";
import { Input } from "./basic/Input";
import style from "./test.module.css"

export default function () {
  const [count, setCount] = useState(1)
  
  function handleClick() {
    console.log(this, 123, count)
  }
  return (
    <div style={{padding: '10px'}}>
      <Button>123</Button>
      <Button onClick={handleClick} disabled>456</Button>
      <Input placeholder='请输入收到的短信验证码' />
      <div className={style.test}>111</div>
    </div>
)
}

test.module.css
.test {
    background: red;
}

使用context代替redux

App.js
import UserInfo from "@/context/userInfo.jsx";
import { useSetState } from "ahooks";

export default function App() {
  // 数组结构
  const [userInfo, setUserInfo] = useSetState({});

  return (
    <UserInfo.Provider value={{ userInfo, setUserInfo }}>
         ...
    </UserInfo.Provider>
  );
}

使用：const { userInfo, setUserInfo } = useContext(UserInfo);