# study

**Repository Path**: xiaoyei/study

## Basic Information

- **Project Name**: study
- **Description**: 这是一个学习库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: react
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-21
- **Last Updated**: 2021-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

多入口react项目脚手架

public
   template.html
   template.css
   favicon.jpn
src
   page1
   page2
   index.jsx
   index.html
   index.css

一、如果模板文件使用ejs，则balel-loader要排除ejs
二、html中的img标签由请使用如下形式引入，不需要使用html-loader，因为它与html-webpack-plugin相冲突
  <img src="<%= require('./assets/img/logo.svg') %>" alt="">

三、在函数组件中使用副作用钩子

1、在componentDidMount与componentUpdate中自动调用副作用钩子函数
  const [count,updateCount]=useState(0)
  useEffect(() => {
    document.title=`you clicked ${count} times`
  });
2、传入空数组，只在中调用一次componentDidMount
  const [count,updateCount]=useState(0)
  useEffect(() => {
      document.title=`you clicked ${count} times`
  },[]);
3、传入指定状态的数组，只在中调用一次componentDidMount，并在前一个count与当前传入的count值不相同时才执行副作用操作
  const [count,updateCount]=useState(0)
  useEffect(() => {
      document.title=`you clicked ${count} times`
  },[count,id]);//仅在count或者id更改时更新

2、返回一个清理函数，则会在componentWillUnMount中调用该函数
  const [count,updateCount]=useState(0)
  useEffect(() => {
      document.title=`you clicked ${count} times`
      return function cleanup(){
           //执行清理方法
      }
  });

我们推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则。此规则会在添加错误依赖时发出警告并给出修复建议。

webpack.config中的filename,name,publicPath,outputPath都可以是函数