react 基础

<!-- jsx语法：js中编写标签语言<h1>Hello</h1>，类似模板语法，应用于react跨年中 -->
<!-- (): js中编写jsx语法时，遇到标签结构要换行的时候，用 () 包裹起来 -->

<!-- 组件
1. class类的形式创建组件
2. Hook的形式创建组件
组件可以是js 也可以是jsx -->

<!-- props属性 向下传递数据 -->

<!-- State -->
<!-- 可以不写constructor，一旦写了constructor，就必须在此函数中写super(),
此时组件才有自己的this，在组件的构造函数中都可以使用this关键字，
否则如果只是constructor 而不执行 super() 那么以后的this都是错的！！！ -->
<!-- 例如 -->
<!-- constructor(props) {
    super(props);
    this.state = {
        count: 1
    };
} -->

<!-- 事件处理this指向 -->
<!-- onclick事件 - bind(this) this才会指向当前组件 否则undefined
但是箭头函数可解决this指向问题, 不需要bind(this) 就可以指向当前组件 -->

<!-- react setState()警告 ：  Do not mutate state directly. Use setState();
react不允许直接对State数据直接进行操作，必须声明其他变量操作后在赋值
例如
    warn(会弹出警告):     this.setState({
                            count: this.state.count += 1
                        })
    正确写法:            let num = this.state.count;
                        this.setState({
                            count: num += 1
                        }) -->

<!-- react生命周期 -->

<!-- 组件的生命周期大致可分成三个状态：
    Mounting：已插入真实 DOM
    Updating：正在被重新渲染
    Unmounting：已移出真实 DOM
函数列表:
    1. componentWillMount 在组件渲染之前执行

    2. componentDidMount  在组件渲染之后执行

    3. shouldComponentUpdate  返回一个布尔值。 是否更新组件状态

    4. componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化 render 时不会被调用。
     
    4. componentWillUpdate 在组件接收到新的 props 或者 state 但还没有 render 时被调用。在初始化时不会被调用。

    5. componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

    6. componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。 -->

    React表单
    1. 受控组件 （state onchange target获取value值 单一input）
    2. 非受控组件 （ref 获取所有input中value值 多个input）

    <!-- 状态提升 -->
    props

    <!-- PropsType验证 props类型， 强类型声明 -->
    组件名.PropsTypes = {
        变量： PropsTypes.声明类型
    }

    组件的两种声明方式：
    1. es6写法： export default class XXX extends React.Component
    2. 纯函数写法： const XXX () =>{}  ;export default XXX   
    es6写法有生命周期，render，state等复杂操作时使用， 纯函数写法只写纯函数的计算时使用

    HashRouter/BrowserRouter 区别
    HashRouter  锚点链接
    BrowserRouter   H5新特性 、404重定向

    exact 布尔值 匹配规则 
        不添加exact http://localhost:3000/home/mine 可以展示home和mine组件  
        添加exact 不展示home组件,只展示mine组件
    strict 布尔值 精准匹配  （搭配exact 否则无效）
        不添加exact和strict  http://localhost:3000/home/ 可以展示home组件  
        添加exact和strict  http://localhost:3000/home/ 不可展示home组件 

    Switch 标签组件 只加载一个页面组件
    Router不填写path属性，则全规则匹配，每个页面都有，例如404，需要添加Switch标签，则只显示一个页面组件

    <Route render=( (props)=> <Demo (...props) name="你好"/> )></Route> 路由简约写法标签传递props参数，props里面会有自定义属性name

    NavLink 高亮 自动添加点击元素active
    修改默认动态class属性  activeClassName='check' 
    修改默认高亮样式 行内样式属性 activeStyle={{color: 'yellow'}}