react 咻咻咻

# react 必知必会

1. 函数式组件(简单无状态场景) / class类式组件 (复杂有状态场景)
2. react思想：状态驱动UI
3. 组件实例三大核心：refs/props/state
4. class = function + hooks
5. this.state = {isHot:true}
   const isHot = this.state

# 1. hello world

<div id="example"></div>
<script type="text/babel">
  const vdom= <h1>Hello, world!</h1>;
  ReactDOM.render(vdom,document.getElementById('example'));
</script>

# 2. 函数式组件

# 3. 类组件

# 4. 函数和class组合场景

#  5. state 和 props
(我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上)
(https://www.runoob.com/react/react-props.html)

# 6. 切换按钮点击事件
(https://www.runoob.com/react/react-event-handle.html)

# 7. 事件传参
(https://www.runoob.com/react/react-event-handle.html)

# 8. 案例演示1
(事件是通过改变status状态来实现的，等同于通过变量param控制UI)

# 9. 表达式和html在{ }中混编
(true && expression 总是返回 expression，而 false && expression 总是返回 false)

# 10. 条件判断：三目运算

# 11. 阻止组件渲染

# 12. 列表渲染

# 13. key值传递
(如果要传递key值，需要借助id)
const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

# 14. 生命周期
(结果：
    Component WILL MOUNT!
    Component DID MOUNT!
    Component WILL RECEIVE PROPS!
    Component WILL UPDATE!
    Component DID UPDATE!
)

# 15. react请求数据更新status状态

# 16. form表单输入框变更监听

# 17. 下拉菜单提交

# 18. 输入框和单选

 ==============================华丽分割线==================================

# 1. 简洁版写法

# 2. props传递对象写法

# 其他 (复制person对象，并修改/添加name属性，之后合并内容)
let person2 = {...person,name:'cc'}

# 3. class类中限制props属性数据类型

# 注意
props是只读的

# 4. 字符串类型ref

# 5. 回调形式的ref (内联方式)

# 6. createRef (最新写法)

# 7. 表单提交 （非受控组件）

# 8. 表单提交 (受控组件：用到state状态)

# 10. 高阶函数/函数柯里化

# 11. 组件生命周期 (挂载阶段)

# 12. 生命周期

# 12.1. 旧版本 (16.8)

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
    1.constructor()
    2.componentWillMount()
    3.render()
    4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    1.shouldComponentUpdate()
    2.componentWillUpdate()
    3.render()
    4.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    1.componentWillUnmount()

# 12.2. 新版本 (17.2)

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
    1.constructor()
    2.getDerivedStateFromProps 
    3.render()
    4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    1.getDerivedStateFromProps
    2.shouldComponentUpdate()
    3.render()
    4.getSnapshotBeforeUpdate
    5.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    1.componentWillUnmount()

# 小结
新版本去掉三个生命周期：componentWillMount、componentWillReceiveProps、componentWillUpdate
增加了三个生命周期：getDerivedStateFromProps、getDerivedStateFromProps、getSnapshotBeforeUpdate

# 13. 插件

# 13.1. 前端跨域代理 (正向代理)

# 13.2. 兄弟组件之前传值 (消息订阅与发布机制)

# 13.3. fetch/axios 数据请求 (fetch：关注分离原则)

# 13.4. SPA 单页面，多组件，局部刷新

# 14. react-router

# 概念

# 14.1. 什么是路由
1.	一个路由就是一个映射关系(key:value)
2.	key为路径, value可能是function或component
3. function为后端路由，component为前端路由

# 14.2. 路由分类
1.	后端路由：
1)	理解： value是function, 用来处理客户端提交的请求。
2)	注册路由： router.get(path, function(req, res))
3)	工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2.	前端路由：
1)	浏览器端路由，value是component，用于展示页面内容。
2)	注册路由: <Route path="/test" component={Test}>
3)	工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

# 14.3. 前端路由原理
前端路由依靠浏览器的历史记录history实现

# 14.4. react-router分类
1. web端使用 (react-router-dom)
2. native端使用
3. any任何都可以使用

# 14.5. 路由基本使用
1. 场景：点击左侧导航区，展示区内容切换
2. 导航区：<Link to="/xx">Demo</Link>
3. 展示区：<Route path="/xx" component={Demo} />
4. 主程序入口：<APP>最外层包裹一个<BrowserRouter>或<HashRouter>

15. 路由组件与一般组件的区别

# 16. NavLink使用

注意：<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数

小结：Navlink为link增加了几个渲染属性 (选中样式)

 

# 17. 包装自定义组件 (MyNavLink组件)

# 18. switch标签 (当查找到目标路由后立即结束匹配)

# 19. 初始化默认路由选项

# 20. react-route嵌套路由

# 21. 向路由组件传递参数的三种方式

1. params参数
携带参数：<Link to='/demo/test/tom/18'>详情</Link>
声明接收：<Route path='/demo/test/:name/:age' component={Test}/>
接收参数：const {name,age} = this.props.match.params

2. search参数
携带参数：<Link to='/demo/test?name=tom&age=18'>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path='/demo/test' component={Test}/>
接受参数：const {search} = this.props.location.search
注意：search是unicode编码，需要借助querystring第三方工具包来解析

3. state参数
携带参数：<Link to={{path='/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path='/demo/test' component={Test}/>
接受参数：const {search} = this.props.location.state