Day2：react组件初探

本文为书籍《深入浅出React和Redux》的笔记
书中React的版本为v15.4，学习时React的版本为v17.0.2
文中提到的ControlPanel.js为父组件，Counter.js为子组件

书中提到的代码下载来源

https://github.com/mocheng/react-and-redux

作为一个合格的开发者，不要只满足于编写出了可以运行的代码，而要了解代码背后的工作原理；不要只满足于自己编写的程序能够运行，还要让自己的代码可读而且易于维护。这样才能开发出高质量的软件。

易于维护组件的设计要素

**高内聚：指的是把逻辑紧密相关的内容放在一个组件中。
**低耦合：指的是不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。

React组件的数据分为两种

prop和state，无论prop或者state的改变，都可能引发组件的重新渲染，prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。
【解决BUG】 在尝试第二个案例的时候报错了

ERROR in ./src/Counter.js 97:11-38

export 'PropTypes' (imported as 'PropTypes') was not found in 
'react' (possible exports: Children, Component, Fragment, 
Profiler, PureComponent, StrictMode, Suspense, 
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, 
cloneElement, createContext, createElement, createFactory, 
createRef, forwardRef, isValidElement, lazy, memo, useCallback,
 useContext, useDebugValue, useEffect, useImperativeHandle, 
 useLayoutEffect, useMemo, useReducer, useRef, useState, 
 version)

搞了半天，最后还是通过搜索解决了，应该是代码太旧的问题

import React, {
    Component