JSX 仅仅是 reacteElement() 方法的语法糖 （简化语法）JSX 语法被 @babel/preset-react 插件编译为 createElement() 方法React 元素：是一个对象，用来描述你希望在

现代的前端应用大多数都是 SPA (单页应用程序),也就是只有一个HTML页面的应用程序。因为他的用户体验更好、对服务器的压力也更小。所以前端路由是为了更有效的使用单个页面来管理原来多页面的功能。 路由的功能：让用户从一个视图导航到另一个试图（页面）前端路由是一套映射规则，在React中，时URL路径与组件的关系使用 React 路由简单来说，就是…

组件更新机制 setState() 的两个作用：1.修改 state 2.更新组件（UI）过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件的所有子组件 性能优化 1. 减轻 state 只存储各组件渲染相关的数据（比如：count、列表数据、loading等）注意：不做渲染的数据不要放在 state 中对于这种需要在多个方法中用到的数…

思考：如果两个组件中的部分功能相似或相同，该如何处理处理方式： 复用组件的功能（联想函数封装）复用啥？ state 、 操作state的方法 （组件状态逻辑）两种方式： render props 模式 、高阶组件（HOC）注意：这两种方式 不是新的API ， 而是利用React自带特点的编码技巧，演化而成的固定模式个人理解：render-props…

props.children属性 children属性：表示组件标签的子节点。当组件标签有子节点是时，props就会又该属性chidren属性：可以传递和props一样的数据类型，（文字、react元素、标签、函数、其他数据类型的数据等） import React from "react"const Hello = ()=>{   …

使用步骤 调用React.createContext() 创建 Provider (提供数据) 和 Consumer (消费数据) 两个组件 import React from "react'const { Provider, Consumer} = React.createContext() 使用 Provider 组件作为父节点 <Pro…

import React from "react"class Hello extends React.Component{    constructor(props){        supre(props)        this.state = …

父子组件传值 import React from "react"/*父组件*/class Father extends React.Component{    constructor(props) {        super(props)       &nb…

class组件的创建方式类组件中props的使用类组件中state的使用类组件的生命周期 1. class组件的创建方式 class组件也叫作类组件,有两种创建方式,第一种为Es5,第二中试Es6方式. Es5创建方式    import React from "react"    const A = Rea…

创建方式函数组件的state函数组件的生命周期 1. 创建方式    import React from "react"    //箭头函数创建    const Hello = (props)=>{        return (  …