陈小陈的博客

但是这里需要注意的是，我们不直接去调用 Reducer 函数，而是通过 Store 对象提供的 dispatch 方法来调用。state 是只读的。这里需要注意的是，为了保证数据状态的可维护和测试，不推荐直接修改 state 中的原数据。

NavLink 组件NavLink 与 Link 类似，但是它提供了两个特殊属性用来处理页面导航NavLink 在 Link 功能的基础添加了 选中当前项的效果exact exact 精确匹配，NavLink 在匹配前时，默认也是模糊匹配。activeClassName 当前选中项的class，默认为 activeactiveStyleisActive 判断当前项是否选中 返回值为 true 选中当前，否则不选中Nav.jsimport React from "react"

React Router 库React Router 提供了多种不同环境下的路由库webnative基于 Web 的 React Router基于 web 的 React Router 为：react-router-dom安装npm i -S react-router-dom组件BrowserRouter 组件 – history基于 HTML5 History API 的路由组件import React from 'react';import ReactDOM fr.

路由路由根据不同的url规则，给用户展示不同的视图(页面)；当应用变得复杂的时候，就需要分块的进行处理和展示；传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个JavaScript重新执行，丢失状态。SPASingle Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页

hooksReact hooks(钩子)hooks 是React 16.8中的新增功能。它们使得无需编写类即可使用状态和其他React功能.React Hooks 优势简化组件逻辑；复用状态逻辑；无需使用类组件编写。Hook 使用规则只能在 React 函数中调用 hooks；只在外层使用 hooks。useStatelet [状态,修改该状态的方法] = useState(初始值);const [state, setState] = useState(initialSt

函数式组件函数式组件，本质就是一个常规函数，接收一个参数 props 并返回一个 reactElement函数式组件中没有this和生命周期函数,不能使用 string ref使用函数式组件时，应该尽量减少在函数中声明子函数，否则，组件每次更新时都会重新创建这个函数App.jsimport React from 'react';import Child from './child';function App() { return <div> <h1>

key在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。如果是批量生成的一组元素，那React就会根据 key 值去做对比key 属性: 方便 React 进行节点对比 diffkey 取值：同一个列表中 key 值不能重复更新前后同一个元素的key值不能变如果列表中发生顺序等操作变化，key 一定要用数据的idPureComponentPureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法，其他

当想要获取表单的一些内部状态时，就可以将表单的内部状态和组件的状态进行绑定，这样就形成受控组件受控组件: 让表单控 的内部状态 和我们 state 保持一致非受控组件: 我们不需要同步 value 值(defaultValue，defaultChecked)受控组件将表单控件的内部状态(value,checked)和组件的状态进行绑定，然后控件 onChange 时，再将控件的状态同步给组件的状态。import React, { Component } from "react";clas.

组件的生命周期挂载阶段 (组件从创建到挂载到真实DOM中) mount: - constructor(props) 组件的初始化 - static getDerivedStateFromProps(props) - 注意 this 问题 - render - componentDidMount -- 处理副作用(请求)更新阶段 (组件开始更新一直到真实DOM更新完成): - static getDerivedStateFromProps(props) 观察 props 的

跨组件通信 contextReact.createContext(defaultValue);{ Consumer, Provider } = createContext(defaultValue)Context.Provider 在父组件调用 Provider 传递数据value 要传递的数据接收数据class.contextType = Context;static contextType = Context;this.context;Context.Consumer&

组件通信在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 propsReact.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。通信方案父传子：父组件调用子组件时把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据。子传父：在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中

state: 组件自身的数据setState(updater, [callback])updater: 更新数据 FUNCTION/OBJECTcallback: 更新成功后的回调 FUNCTION异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能浅合并 Object.assign()调用 setState 之后，会触发生命周期，重新渲染组件 class App extends Component { state={ count: 1, .

在react中会把视图拆分成若干的组件，分为两种：类组件函数组件类组件使用类组件时，必须继承自 React.Components类组件必须有一个render方法，在render的return 中定义该组件要渲染的试图组件的视图更新：state 状态事件注意事件名是小驼峰事件处理的函数的this默认是undefined，通过以下两种方式处理this箭头函数this绑定通过箭头函数处理thisclass App extends React.Component{.

JSX 注意事项1、JSX 插值表达式：注意插值表达式中，接收的是一个JS表达式- JS 表达式：运行之后会有一个值的运算叫做表达式：变量、运算、函数调用在JSX内容中，不同类型的值的表现：字符串、数字：原样输出布尔值、空、未定义 会被忽略复杂类型：对象: 不能在内容输出数组: 忽略掉，后，拼接输出条件渲染:||、&&、?:复杂情况渲染：借助函数注意：分清楚 表达式 与 语句 的区别，if、for、while 这些都是语句，JSX 不支持

React一个用于构建用户界面的 JavaScript 库中文手册：地址基于浏览器的模式React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件React.createElement(type,props,children)ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染ReactDOM.render(Vnode, container[, callback]) - element：要渲染的内容 - container：要渲