SillyBoy的博客

React路由1 使用步骤安装npm install react-router-domyarn add react-router-dom导入路由核心组件三个核心的组件：BrowserRouter、Route、Linkimport { BrowserRouter as Router, Route, Link } from 'react-router-dom'使用Router组件包裹整个应用（一个React应用只需要使用一次）。两种常用的Router：HashRouter

React中的虚拟DOM和Diff算法执行过程初次渲染时，React会根据初始state(Model)，创建一个虚拟DOM对象(树)。根据虚拟DOM生成真实的DOM树，并渲染到页面。当数据发生变化时，重新根据新的数据创建新的虚拟DOM对象(树)。使用DIff算法对比新旧两个虚拟DOM对象，得到需要更新的内容。React只将变化的内容更新(patch)到DOM中，重新渲染界面。render方法render方法调用并不意味着浏览器进行重新渲染。render方法调用仅仅说明要执行D

React的生命周期文章目录React的生命周期1 生命周期图示2 生命周期的三个阶段3 生命周期执行顺序3.1 创建阶段3.2 更新阶段3.3 卸载阶段3.4 新生命周期函数执行顺序1 生命周期图示旧版生命周期新版生命周期2 生命周期的三个阶段创建阶段（挂载时）更新阶段卸载阶段3 生命周期执行顺序3.1 创建阶段constructor触发时机：创建组件，初始化render触发时机：组件渲染完毕（禁止在render中调用this.setState，会发生

组件通信文章目录组件通信1 组件的props1.1 作用1.2 组件标签属性来传递数据1.3 函数组件和类组件来接收数据1.4 props特点1.5 children属性1.6 props校验2 父传子3 子传父4 兄弟组件之间传递5 Context1 组件的propsProps 是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。1.1 作用接收传递给组件的数据1.2 组件标签属性来传递数据通过给组件标签添加属性的方式传递数据。React

React事件处理文章目录React事件处理1 事件绑定2 事件绑定this指向1 事件绑定语法：on +事件名 = { 事件方法 }事件采用驼峰命名法例：onClick={()=>{changeWord}}2 事件绑定this指向箭头函数利用箭头函数自身不绑定this的特点。addNum (){ this.setState({ })}//...省略render(){ return( <button onClick

React组件文章目录React组件1 使用函数创建组件2 使用类创建组件3 抽离组件到单独的js文件4 有状态组件与无状态组件5 组件中的state与setState5.1 state的基本使用5.2 setState()修改状态6 高阶组件6.1 概念6.2 使用React组件有两种创建方式，分别是使用函数创建和使用类创建。此二者一般称为函数组件和类组件。当组件较多时可以把单独的每个组件抽离到单独的js文件中，方便调用和维护。1 使用函数创建组件函数名必须大写字母开头，作为渲染组件时

React基本使用1 特点声明式设计------采用声明范式，可以轻松描述应用。高效------React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活------可以与已知的库或框架很好地配合。JSX------JSX 是 JavaScript 语法的扩展。组件单向响应的数据流------实现了单向响应的数据流，从而减少了重复代码。2 安装需要三个库： react.development.min.js 、react-dom.development.min.js 和 babel