React论坛 今日: 0|主題: 520|排名: 77 

使用Context，可以跨越组件进行数据传递   import React from 'react'; import ReactDOM from 'react-dom'; const ThemeContext = React.createContext({ background: 'red', color: 'white' });   通过静态方法React.createContext()创建一个Context对象，这个Context对象包含两个组件，<rovider />和 ...

React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle，useRef /* child子组件 */ // https://reactjs.org/docs/hooks-reference.html#useimperativehandle import {useState, useImperativeHandle} from 'react'; ... // props子组件中需要接受ref const ChildComp = ({cRef}) => { const [va ...

吐槽 如果React-Native是个人，我估计已经想要打死他了。。。  上一篇文章 当React开发者初次走进React-Native的世界 前言 最近因为业务需要，做了一些关于React-Native方面的开发，对一些自己遇到的问题做了记录。总共 21 条要点记录，承接于上一篇文章 本文讲的很多问题，不一定是对的，但确实是自己觉得可以 ...

代码分割 Context 错误边界 Fragments Portals forwardRef 小结 用了那么久的react, 竟不知道到原来react有那么多高级特性. 假期没事干, 试用了下一些react高级特性. 下为试用记录. 代码分割 将一个庞大的单页应用打包成一个庞大的js, 首屏加载可能会非常糟糕, 这时可能会考虑做代码分割, 即根据模块或者路由分开打包js, ...

泛型类型 TypeScript 中，类型（interface, type）是可以声明成泛型的，这很常见。 interface Props<T> { content: T; } 这表明 Props 接口定义了这么一种类型： 它是包含一个 content 字段的对象 该 content 字段的类型由使用时的泛型 T 决定 type StringProps = Props<string>; let props: StringPro ...

React == 实现简易版购物车 　　1、几个要点： 　　为了方便后面使用input type = "checkbox" 实现复选框的选中/不选中，给传递过来的属性要在遍历的时候，单独加上一个新属性 checked  　　count 属性 默认值 都是1. 　　state = { 　　　　　all : false, sumprice :0, one : false, sumcou ...

在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统，比如 director，代码库也比较轻量。当然，主流的前端框架也都有自己的路由，比 ...

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。 引用 react-router 　　　　　　 // React Router 核心 react-router-dom 　 ...

React 中的默认 Props 通过组件的 defaultProps 属性可为其 Props 指定默认值。 以下示例来自 React 官方文档 - Default Prop Values： class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } // Specifies the default values for p ...

在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统，比如 director，代码库也比较轻量。当然，主流的前端框架也都有自己的路由，比 ...

使用react构建单页面应用： 　　实现方法：（1）react-router 　　　　　　　（2）react-router-dom react-router: 实现了路由的核心功能，而react-router-dom依赖react-router， react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能： 　　　　　　　　　　Link组件，会渲染一个a标签； 　　　　　　 ...

Link 现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了<Link>组件用来避免这种状况发生。当 你点击<Link>时，url会更新，组件会被重新渲染，但是页面不会重新加载 嗯、先看个例子 1 <Link to="/about">关于</Link> 2 3 // to为obj 4 <Link to={{ 5 ...

  安装  1 npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令  基本操作 我们新建两个页面，分别命名为‘home’和‘mine’。这页面中编写如下代码： import React from 'react'; //home.js export default class Home extends React.Component { render() { return ...

大纲主要分为4大块儿，主要是结合源码对 react事件机制的原理 进行分析，希望可以让你对 react事件机制有更清晰的认识和理解。当然肯定会存在一些表述不清或者理解不够标准的地方，还请各位大神、大佬斧正。0 ...

　　JavaScript是世界上最流行的语言之一，React和Vue是JS最流行的两个框架。但哪一款更适合你？本文将根据每个框架的重要优缺点，以及设计思路和见解，来对比介绍两个框架。   一.框架背景 React 　　React得到了Facebook社区的支持，使得构建交互式UI非常容易。React本质是前端组件化框架，不是一个完整的MVC框架， ...

npm 官网指导: https://www.npmjs.com/package/react-native-sqlite-storage 1. 执行: npm install react-native-sqlite-storage 2.cd ios 执行pod install 3.执行react native link 使用： 按照上面官网说的，在ios项目根目录下新建www文件夹，里面放sqlite数据库文件 在react native项目中使用:  1. 导入 ...

react-router 5.0 的鉴权 当我们使用react-router 控制页面的路由时候，有些页面，是需要登录才能访问，有些不需要登录就可以访问，还有些页面，是根据用户的权限来限制访问的。 如果是传统的多页面，只需要后端鉴权就可以了，没权限就直接后端重定向。 但是单页面情况下，路由使用了 window.history.statepush 这种情况下 ...

前言 最近在看 React 的新语法—— React Hooks，只能一句话概括：React 语法真的是越来越强大，越写代码越少。 强烈推荐还没看 React Hooks 的同学去学习下，这会让你写react 项目变得非常爽！ 以前 React 组件可以看成是： 无状态组件（function定义）和有状态组件（class 定义），React Hooks 出现之后，我们基本所有的 ...

Redux 是目前 React 系统中最常用的数据管理工具，它落实并发扬了 Flux 的数据单向流动模式，被实践证明为一种成熟可用的模式。 尽管承受着一些非议，Redux 在 React 数据管理界的地位仍然没有被取代。我听到的针对 Redux 最多的非议是它需要遵守的规则和步骤太多，让人们觉得束手束脚。然而个人觉得这正是 Redux 的意思所 ...

React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。 所有，可以对组件进行异步加载处理，通常可以使用 React-loadable。 React-loadable 使用 例如，对于项目中的detail组件（/src/pages/detail/），在 detail 目录下新建 lo ...