标签 React 下的文章

一. 简介react-router ：核心模块，包含 React 路由大部分的核心功能，包括路由匹配算法和大部分核心组件和钩子。react-router-dom：React 应用中用于路由的软件包，包括 react-router 的所有内容，并添加了一些特定于 DOM 的 API，包括但不限于 BrowserRouter、HashRouter 和 Link。react-router-native： 用于开发 React Native 应用，包括 react-router 的所有内容，并添加了一些特定于 React Native 的 API，包括但不限于 NativeRouter 和 Li...

十五、Mobxhttps://cn.mobx.js.org/npm i mobx@51. Mobx 介绍Mobx 是一个功能强大，上手非常容易的状态管理工具Mobx 背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得Mobx 利用 getter 和 setter 来收集组件的数据依赖关系，从而在数据发生变化的时候精确知道哪些组件需要重绘，在界面的规模变大的时候，往往会有很多细粒度更新（vue类似）2. Mobx 与 redux 的区别Mobx 写法上更偏向于 OOP对一份数据直接进行修改操作，不需要始终返回一个新的数据并非单一 store，可以多 storeRedux 默认以 J...

八、React 生命周期1. 初始化阶段2. 运行中阶段3. 销毁阶段老生命周期的问题componentWillMount，在 ssr 中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求componetWillupdate，更新前记录 DOM 状态, 可能会做一些处理，与 componentDidUpdate 相隔时间如果过长，会导致状态不太信新生命周期的提替代getDerivedStateFrom...

一、React 介绍1. React 起源与发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。2. React 与传统 MVC 的关系轻量级的视图层库！A JavaScript library for building user interfacesReact 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React 并不非常认可 MVC 开发模式；React 构建页...

React Router 6 快速上手1.概述React Router 以三个不同的包发布到 npm 上，它们分别为：react-router: 路由的核心库，提供了很多的：组件、钩子。react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。与React Router 5.x 版本相比，改变了什么？内置组...

件通信方式总结组件间的关系：父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）几种通信方式：props：children propsrender props消息订阅-发布：pubs-sub、event 等等集中式管理：redux、dva 等等conText:生产者-消费者模式比较好的搭配方式：父子组件：props兄弟组件：消息订阅-发布、集中式管理祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

1. setStatesetState 更新状态的2种写法 (1). setState(stateChange, [callback]) ------ 对象式的 setState 1.stateChange 为状态改变对象(该对象可以体现出状态的更改) 2.callback 是可选的回调函数, 它在状态更新完毕、界面也更新后(render 调用后)才被调用 (2). setState(updater, [callback]) ------ 函数式的 setState ...

npm run bulidnpm i serve -gserve bulid

npm i redux-devtools-extensionstore 文件中进行配置：import { composeWithDevTools } from 'redux-devtools-extension' export default createStore(countReducer, composeWithDevTools(applyMiddleware(thunk)))

纯函数一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)必须遵守以下一些约束不得改写参数数据不会产生任何副作用，例如网络请求，输入和输出设备不能调用 Date.now() 或者 Math.random() 等不纯的方法redux 的 reducer 函数必须是一个纯函数高阶函数理解: 一类特别的函数情况1: 参数是函数情况2: 返回是函数常见的高阶函数:定时器设置函数数组的 forEach()/map()/filter()/reduce()/find()/bind()promisereact-redux 中的 connect 函数作用: 能实现更加动态, 更加可扩展的功能

react-redux 基本使用明确两个概念UI 组件：不能使用任何 redux 的 api，只负责页面的呈现、交互等容器组件：负责和 redux 通信，将结果交给 UI 组件如何创建一个容器组件靠 react-redux 的 connect 函数connect(mapStateToProps, mapDispatchToProps)(UI组件)mapStateToProps：映射状态，返回值是一个对象mapDispatchToProps：映射操作状态的方法，返回值是一个对象容器组件中的 store 是靠 props 传进去的，而不是在容器组件中直接引入mapDispatchToProp...

redux 理解学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/reduxredux 是什么redux 是一个专门用于做状态管理的JS库(不是 react 插件库)。它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。作用: 集中式管理 react 应用中多个组件共享的状态。什么情况下需要使用 redux某个组件的状态，需要让其他组件可以随时拿到（共享）。一个组件需要改变另一个组件的状态（通信）。总体原...

流行的开源React UI组件库material-ui(国外)官网: http://www.material-ui.com/#/Github: https://github.com/callemall/material-uiant-design(国内蚂蚁金服)官网: https://ant.design/index-cnGithub: https://github.com/ant-design/ant-design/ant-design 组件库使用安装 npm i antd引入需要使用的组件 import { Button } from 'antd'接着引入 css 文件 import ...

底层原理不一样BrowserRouter 使用的是 H5 的 history API，不兼容 IE9 及以下版本HasRouter 使用的是 URL 的哈希值url 表现形式不一样BrowserRouter 的路径中没有 #，例如：localhost:3000/dome/testHasRouter 的路径中包含 #，例如：localhost:3000/#/dome/test刷新后对路由的 state 参数的影响BrowserRouter 没有任何影响，因为 state 保存在 history 对象中HasRouter 刷新后会导致路由 state 参数的丢失HasRouter 可以用于解...

push 和 replace默认 push 模式，类似压栈// 开启 replace 模式 <Link repalce to={`/home/message/dateil/Joe/18`}>详情</Link>编程式路由导航借助 this.props.history 对象上的 API 对操作路由跳转、前进、后退this.props.history.push 跳转// push 跳转+携带 params 参数 this.props.history.push('/home/message/detail/Joe/18') // push 跳转+携带 search 参数 ...

params 参数 *路由链接（携带参数）：{/* 传递 params 参数 */} <Link to={`/home/message/dateil/Joe/18`}>详情</Link>注册路由（声明接收）：{/* 声明接收 params 参数 */} <Route to='/home/message/detail/:name/:age' component={Detail} />接收参数// 路由组件接收 params 参数 this.props.match.params // {name:'Joe', age: '18'}search 参数路由链接...

React 路由介绍现代前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在 React 中，是 URL 与 组件 的对应关系使用 React 路由简单来说，就是配置 路径 和 组件（配对）路由的基本使用使用步骤1. 安装 react-router-domnpm i react-router-dom2. 导入路由的三个核心组件：Router、Route...

前置说明React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpromise风格可以用在浏览器端和node服务器端axiosaxios 中文文档相关APIGET 请求// 可用 async await 修饰 axios.get('/user?ID=12345') .then(function (response) { ...

使用 create-react-app 创建 React 应用React 脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer...）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目...

setState() 说明更新数据setState() 是异步更新数据的可以多次调用 setState()，之后触发一次重新渲染（render）使用下面这种语法时，后面的 setState() 不要依赖于前面的 setState()this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) console.log(this.state.count) // 1 this.setState({ count: this.state.count + 1 // 1 + 1 }) conso...

refs组件内的标签可以定义 ref 属性来标识自己字符串形式的 ref我们不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。<input type="text" ref="input1" />回调形式的 ref<input type="text" ref={ (currentNode) => { this.input1 = currentNode } } />如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入...

组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，将一个完整的功能拆分成多个组件，以更好地完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯组件的 props组件是封闭的，要接收外部数据应该通过 props 来实现props 的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数 props 接收数据，类组件通过 this.props 接收数据// 函数组件 // 接收数据 function Hello(props) ...

React 组件介绍组件是 React 的一等公民，使用 React 就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能可复用、独立、可组合React 组件的两种创建方式使用函数创建组件使用 JS 的函数（或箭头函数）创建的组件函数名必须以大写字母开头函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容function Hello() { retunr ( <div>这是一个函数组件！</div> ) } const Hello = () =>　<div>这是一个函数...