react简单了解

React简单了解、
react特点
1. 声明式设计-React采用声明范式，可以轻松描述应用。
2. 高效-React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活-React可以与已知的库或框架很好地配合。
4. JSX- JSX是JavaScript语法的扩展。React开发不一-定使用JSX,但我们建议使用它。
5. 组件-通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流- React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
注意：
react 里 { } 由他的意义 用的时候要慎重
this 指向由他的意义 用的使用 用箭头函数
元素中 不能直接使用 class || 使用 className
元素中 不能直接使用 for || htmlFor
在jsx里使用 js 。需要{ }包起来 同vue {{ }} 遇见大括号就直接当成js运行
算法
虚拟DOM和 diff算法
DIFF算法在执行时有三个维度，分别是Tree DIFF、 Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。
组件
1.class有自己的数据，也就是state状态，而且可以修改，有自己的生命周期 ，构造函数组件中没用state，没用生命周期
2.props 的数据只读，不可修改state，可以修改
3.使用组件时 首字母大写
构造函数：无状态组件
使用属性传递，props接收。没用生命周期
class类：有状态组件
class传值 props 不用接受 能直接使用 this.props。有生命周期

Props

传递 函数时 需要 在 ()=>this.props.addCount()

 <button  onClick={()=>this.props.addCount()}></button>

在构造函数里 需要在 （） 括号里引用 props || 而 class类不用 应用 props 直接 this.props 接收父组件传递的数据

生命周期

创建阶段
compomentWill Mount -------（可以调用 ajax接口）
render -----才开始构建 但是还没有 dom 有的是虚拟 DOM
componentDidMount---------（） 真实DOM 被渲染 — （ajax推荐）
运行阶段
销毁阶段
#路由
安装

npm install react-router-dom

BrowserRouter as Route 启动整个路由的标识符只能使用一个
页面配置路由

import {BrowserRouter as Router,//启动路由跳转的基本，每个项目有且只有一个根目录
        Switch,//包含路由的规则的组件
        Route,//配置路由规则的标签
        Link//添加跳转链接
       } from ’react-router-dom‘

路由规则

<Router>    {/* 包含   link  Switch  Route */}
	<Link to="/vidly">Vidly</Link>  {/* 再也使用路由 */}
	<Switch> 
    	 <Route path="/vidly">     
            <Vidly />   {/* 要跳转的页面  */}
    	 </Route>
	</Switch>
</Router>

子路由
子路由规则放在父级路由规则的前一个位置

    <Link to="/movies/new"></Link>{/* 使用路由 嵌套路由路径*/}
<Route path="/movies/:id">{/* /路径配 要跳转的子路由 */}
        <New />
 </Route>