天道酬勤,学无止境

react

# 组件和jsx
## react组件
jsx文件,里面是jsx语法生成的dom
## jsx语法
jsx除了是文件后缀外,在组件内还是一种语法。
`<img/>`这个jsx语法是`React.createElement('img')`语法糖

## 样式绑定
类名样式:className
内联样式/行内样式:`style={{color:'red'}}` 第一个括号表示表达式,第二个是对象
## 样式作用域
- 默认情况下,样式在组件内引入后,作用域是全局的;
- 使用name.module.css命名样式后,作用域就只是当前组件内生效;
## 资源引入img
背景图就是使用相对路径
前景图img用`require('相对路径').default`
## React组件三种写法
- function无状态组件,只接受一个props
- class es6的写法,继承React.Component
- hook新特性,让函数组件拥有全部react特性
- 【废弃】createClass


# api和指令
## dangerouslySetInnerHTML/非dom属性
- 渲染字符串dom片段的,底层做了防注入攻击了。
- 但是一般很多情况下,不推荐使用。
## React.createElement
创建虚拟dom的,`<div/>`jsx语法是它的语法糖,也就是对他的封装。
## React.Component
创建类组件的基类,包含着全部react特性
## React.Fragment
- 占位的点组件,用于包裹集合元素
- 优点:不会渲染成任何标签
- 缩写:`<></>`


# 属性和状态
## 属性 props
- 属性,规则:自定义属性必须全部小写;
- 原生的属性需要额外的注意:class变成了className/for变成了htmlFor/tabindex变成了tabIndex
### 属性默认值

App.defaultProps={prop:defaultValue}

### 属性类型验证
需要引入`prop-types`包依赖。

App.propTypes={prop:propTypes.String}

### 属性的入参写法
- 写在普通的虚拟dom上的叫属性
- 写在自定义组件上的是传参方式
- 参数值的类型有:字符串、数组、数字、布尔值等;如果是对象类型的话,需要使用扩展运算符展开。
## state
- 状态,和vue里的data一样的功能。
- 修改state只能用setState


# 事件函数
1. 在class类里,事件函数的this指向问题
- 三种解决方案:
- 直接在事件绑定函数后面加`.bind(this)`【不推荐,每次点击bind一次,消耗性能】
- 在constructor里事先绑定`.bind(this)`
- 声明函数的时候使用箭头函数绑定this


# 生命周期
## 概念
- 生、老、病、死===人的生命周期
- 初始化、挂载、更新、销毁===程序的生命周期
## 定义
事物的不同阶段发生变化叫做生命周期
## api
- constructor 初始化阶段
- render 解析jsx语法阶段
- componentDidMount 完成挂载
- componentDidUpdate 完成更新
- componentWillUnmount 完成卸载
- static getDerivedStateFromProps(props,state) 修改state值
  - 通过props计算出来的state值,它会覆盖掉setState设置state值
  - 在挂载阶段和更新阶段都会触发
  - 返回对象则替换state,返回null则不修改任何数据
- shouldComponentUpdate(props,state)
  - 性能优化的一部分
  - 执行时机:当props和state发生改变时,还没有在render里体现的时候;
  - 默认返回true,返回false则阻止render的执行,也就相当于阻止更新了。
- getSnapshotBeforeUpdate(prevProps,prevState)
  - 获取dom元素的
  - 入参是上次的旧值
  - 执行时机:render执行后执行
  - 在最近一次渲染输出(提交DOM节点)之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息(例如,滚动位置)此生命周期的任何返回值将作为参数传递给componentDidUpdate
- componentDidCatch(error,info){} 捕获子组件错误的函数


# hook
- 是react自16.8版本后新出的一套api,其目的是为了让函数组件拥有全部的react特性。
## 设计思想
- 函数式编程
## useState
- 状态管理
- 语法:`const [value,setValue] =useState(defaultValue)`
- 定义:让函数组件拥有和类组件一样的状态
- 数组里的第一个值是渲染到页面上的数据state,后面的值是用来修改前面数据的方法,等价于类组件里的setState
- 不能直接修改value,只能用setValue去修改,这样才能让组件进入更新
- 【注意】:
  - useState返回的修改函数和类组件setState执行逻辑不一样
  - setState是把新旧值合并,useState返回的修改函数是用传进来的新值直接把旧值替换了
## useEffect 生命周期
- 定义:把componentDidMount、componentDidUpdate、componentWillUnmount、shouldComponentUpdate合并成一个叫做useEffect函数了。
### componentDidMount
```js
  useEffect(function(){
    console.log('页面挂载完成')
  },[])
```
### componentWillUnmount
```js
  useEffect(()=>{
    return function(){
      //这个函数就是当组件被销毁的时候调用的,在这个函数里做准备卸载的一些事情,比如清除定时器之类的
    }
  })
```
### componentDidUpdate
```js
  useEffect(function(){
    console.log('当props或state发生改变时,这个函数就相当于更新的钩子函数')
  })
```
### shouldComponentUpdate
```js
  useEffect(()=>{
    console.log('只有老谢发生改变,我才执行')
  },[老谢,obj.name])
```


# 受控与非受控
## 受控组件
- 受react控制的叫受控组件
- 举例:当一个input的value绑定了state,那么该组件叫做受控组件。
## 非受控组件
- 不受react控制的,行为完全由用户控制的叫非受控组件。
- 举例:input类型是file的就是纯粹的非受控组件
- defaultValue给非受控组件添加一个初始值,但不影响更新
- ref获取非受控组件节点,进行操作或读取


# React.lazy
- 使用lazy动态加载组件,使用Suspense包裹被懒加载的组件
- 语法:
```js
    const Home=React.lazy(()=>import('path/Home.jsx'))
    //当Home组件尚未加载完成前,显示备用内容
    return <React.suspense fallback={备用内容(可以是字符串、标签)}>
                <Home></Home>
           </React.suspense>
```


# context
- 上下文对象:跨级通信
- 概念:传统的层级组件通信,需要每一层组件写props传递,如果其中某一层组件没有传递props,就导致断层通信。
- 适用:
  - 中小型项目。
  - 大型项目还是使用redux或者mobx集中管理。
     - 上下文对象需要根元素提供数据,如果数据源来自多个组件的话,就不适合使用context了。
     - 当数据源是单一的情况下,使用context比较方便。
# 语法
```js
    //context.js 创建共享的上下文对象
    const context=React.createContext()
```
```js
    //根组件:上下文组件数据提供者
    <context.Provider value={data}>
        <MySub/>
    </context.Provider>
```
```js
    //数据的使用者:后代组件MySub.jsx
    //上下文组件渲染者
    // *Consumer里面必须是一个带返回值的函数
    <context.Consumer>
        {
            (data)=>{
                return <div>
                    {...data}
                </div>
            }
        }
    </context.Consumer>
```
## useContext
- 使用它可以省略掉Consumer组件,而直接获取到Provider提供的数据,【但是】会破坏掉性能优化的memo和shouldComponentUpdate

 

# ref
- 定义:react里的所有组件都有一个ref属性,用于获取组件实例或dom对象。
- 一般必须操作dom的时候才会用到,非必要不推荐使用。
## ref的四种参数
1. React.createRef() 【不可以设置默认参数】【考点】
2. useRef() 【可以设置默认参数】
3. 回调函数
4. 字符串【历史遗留的api】
## ref使用
- 如果给类子组件使用ref,获取的是类组件的实例对象。如果用在纯函数组件上,则会报错,要求必须使用React.forwardRef()
## ref转发
- forwardRef用于获取子组件中的dom元素
- 语法:
```js
    forwardRef((props,ref)=>{
        return <input ref={ref} type='text'/>
    })
```

 

# 高阶组件
- 它不是api,是一种组合模式。目的是为了复用类组件里的方法。
- 定义:一个函数,接收一个组件,返回一个类组价就叫高阶组件。
## 注意
- 高阶组件初始化的时候,不能写在render或return里,不然就报错了。

## hoc高阶组件转发
1. 高阶组件:一个函数接收一个组件,返回一个类组件
2. 作用和目的:复用类组件的方法和事件
3. 早期函数组件没有生命周期和状态,都是使用这种组合【策略】模式去实现复杂的组件开发
- 在Hoc函数中,使用forwardRef将类组件返回,并传入上游注入的ref对象进行绑定。

 

1. 组件
- props:是react组件的输入,他们是从父组件向下传递给子组件的数据,并且子组件无法修改,
- props.children:是一个集合
2. 顶级API
- 定义:凡是挂载在全局对象React下面的方法和属性都叫顶级Api
- React.createElement:创建虚拟dom,接收三个参数('html原生标签','属性','内容或子组件')
- React.Children:提供了用于处理 this.props.children 不透明数据结构的实用方法。

 

# mobx
1. state
2. setState(action)
3. view(函数、事件、调用)
- 可以有一个store也可以有多个
- 任意子组件,只要调用当前store.js,都可以把当前的信息返回到store.js
1. @observable 
- store.js
    - this.state
    - 可以被读取,也可以被修改
2. @observer
- view
    - view 页面中,主要是为了让页面变成响应式,能读取和操作store
3. @action
- store.js
    - this.setState 修改@observable

 

 

# redux
1. state
2. action(唯一修改state的方式、行为)
3. reducer(生成state) 
4. views(函数、事件、调用)
- 只能有一个Store,由多个state片段生成的state

## 使用dispatch 两种方式
一是直接使用
    connect(mapStateToProps,null)(View);
    第二个参数 为空,这样页面直接可以使用this.props 使用
    二是使用mapDispatchToProps
    export default connect(mapStateToProps,mapDispatchToProps)(View);
    直接使用 mapDispatchToProps 内的方法

 

# 其他

##PS
- 基础操作
-- 编辑里的首选项 单位与标尺选择像素
-- 点击窗口可以选择信息、历史记录
- 快捷键s
-- z:放大镜,Alt:缩小
-- ctrl+shift+c 复制图层
-- ctrl+n 新建
-- ctrl+v 粘贴
-- ctrl+alt+shift+s 保存
-- 转为智能对象

## props使用场景
   -  直接使用它的数据类型(父传子)
   - this.props.children 接收父组件传入的数据
   - 接收组件
     ```html
         <Child left={<left title=''></left>}/>
     ```
   - 子传父 用callback函数

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • react-native 插件汇总
    部分自己搜集 部分 来自别的网站 第三方路由插件 react-native-router-flux react-native-scrollable-tab-view 选项卡 测滑动菜单 react-native-ezsidemenu react-native-side-menu react-native-table-component talbe插件 基于react-navigation组件的自定义 head 视图 react-native-carousel 轮播图 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 react-native-keychain iOSKeyChain管理 react-native-picker 滚轮选择器 react-native-picker-Android 安卓滚轮选择器 react-native-refreshable-listview 可刷新列表 react-native-scrollable-tab-view 可滚动标签 react-native-side-menu 侧边栏 react-native-swiper
  • React vs ReactDOM?(React vs ReactDOM?)
    问题 我有点新反应。 我看到我们必须先导入两件事,即React和ReactDOM ,任何人都可以解释其中的区别。 我正在阅读React文档,但没有说。 回答1 React和ReactDOM直到最近才被拆分为两个不同的库。 在v0.14之前,所有ReactDOM功能都是React的一部分。 这可能会引起混乱,因为任何过时的文档都不会提及React / ReactDOM的区别。 顾名思义,ReactDOM是React和DOM之间的粘合剂。 通常,您只会将其用于一件事情:使用ReactDOM.render()安装。 ReactDOM的另一个有用功能是ReactDOM.findDOMNode() ,您可以使用它来获得对DOM元素的直接访问。 (有些事情您应该在React应用程序中谨慎使用,但是可能有必要。)如果您的应用程序是“同构的”,则还可以在后端代码中使用ReactDOM.renderToString() 。 对于其他所有内容,都有React。 您可以使用React定义和创建生命周期挂钩等元素,即React应用程序的胆量。 React和ReactDOM被分成两个库的原因是由于React Native的到来。 React包含用于Web和移动应用程序的功能。 ReactDOM功能仅在Web应用程序中使用。 [更新:经过进一步的研究,很明显我对React Native的无知正在表现出来。
  • 如何配置 react native android 库以使用 npm 安装的 react-native?(How to configure react native android library to use npm installed react-native?)
    问题 我正在写一个android库,需要调用ReactInstanceManager.onHostResume,我的build.gradle文件内容是: apply plugin: 'com.android.library' android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName "1.0" } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "com.facebook.react:react-native:+" } 我使用npm install --save react-native-mylib将它安装到示例项目中,然后使用react-native run-android编译项目,导致了一些错误: MyModuleActivity.java:107: error: cannot find symbol mReactInstanceManager.onHostPause(); ^ symbol: method onHostPause() location
  • How to configure react native android library to use npm installed react-native?
    I'm writing an android library, need to call ReactInstanceManager.onHostResume, my build.gradle file content is: apply plugin: 'com.android.library' android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName "1.0" } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "com.facebook.react:react-native:+" } I installed it into an example project with npm install --save react-native-mylib, and then compile the project with react-native run-android, some errors caused: MyModuleActivity.java:107
  • react-native 第三方库
    react-native 第三方库 React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥 react-native-calendars 🔥🔥🔥🔥 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用Style来配置 🔥🔥 react-native-action-button 支持多种点击事件的Button控件 🔥🔥 react-native-button 另一个Button组件 🔥🔥 ex-navigator 封装Navigator,以Route为中心的Navigator 🔥🔥 gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染 🔥🔥🔥 react-native-activity-view iOS上的分享和action sheets组件 🔥🔥 react-native-app-intro 引导页 🔥🔥 react-native-blur 添加模糊或者毛玻璃效果 🔥🔥🔥 react-native-calendar 日历 🔥 react-native-chart 绘图(折线图,柱状图,扇形图) 🔥🔥🔥 react-native-circular-progress 圆形的显示进度的视图 🔥 react-native-collapsible
  • React Native和React之间有什么区别?(What is the difference between React Native and React?)
    问题 我已经出于好奇而开始学习React ,并且想知道React和React Native之间的区别-尽管使用Google找不到满意的答案。 React和React Native似乎具有相同的格式。 它们的语法完全不同吗? 回答1 ReactJS是一个JavaScript库,它支持前端Web并在服务器上运行,用于构建用户界面和Web应用程序。 它遵循可重用组件的概念。 React Native是一个移动框架,它利用主机上可用的JavaScript引擎,使您可以使用JavaScript构建适用于不同平台(iOS,Android和Windows Mobile)的移动应用程序,从而允许您使用ReactJS来构建可重用的组件并进行通信带有本机组件的进一步说明 两者都遵循JavaScript的JSX语法扩展。 可以在React.createElement编译为React.createElement调用。 JSX深入 两者均由Facebook开源。 回答2 反应: React是用于构建用户界面的声明性,高效且灵活的JavaScript库。 React Native: React Native可让您仅使用JavaScript来构建移动应用程序。 它使用与React相同的设计,使您可以从声明性组件组成丰富的移动UI。 使用React Native,您无需构建“移动Web应用程序”,“
  • React Native常用组件
    本文收录了,React Native中常用的一些相关组件, 摘录的过程中,可能有所差错,不足之处还望指出. 希望大家可以互相学习,互帮互助! 第一部分 基于react-navigation组件的自定义 head 视图 react-native-carousel 轮播图 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 react-native-keychain iOSKeyChain管理 react-native-picker 滚轮选择器 react-native-picker-Android 安卓滚轮选择器 react-native-refreshable-listview 可刷新列表 react-native-scrollable-tab-view 可滚动标签 react-native-side-menu 侧边栏 react-native-swiper 轮播 react-native-video 视频播放 react-native-viewpager 分页浏览 react-native-scrollable-tab-view
  • ReactJS:React.render 不是函数,React.createElement 不是函数(ReactJS: React.render is not a function and React.createElement is not a function)
    问题 当我尝试在 React 版本 15.2.0 中使用这两个函数时,我在代码中发现了一个问题,尽管如此,我找到了一个解决方法,但我想知道是否有更好的解决方案。 //app.jsx var React = require('react'); var ThumbnailList = require('./thumbnail-list'); var options = { ThumbNailData: [{ title : 'Download the ISO', number : 32, header : 'Learning React', description: 'The best library for creating fast and dynamic websites.', imageUrl : 'image source' },{ title : 'Download the ISO', number : 64, header : 'Learning Gulp', description: 'Speed your development framework!', imageUrl : 'image source' }], }; var element = React.createElement(ThumbnailList,options); React.render
  • React.Component与React.createClass(React.Component vs React.createClass)
    问题 我很困惑,组件和React类之间的区别是什么? 以及何时在React类上使用组件? 看起来组件是一个类,而createClass创建一个组件。 https://facebook.github.io/react/docs/top-level-api.html React.Component 使用ES6类定义React组件时,这是它们的基类。 有关如何在React中使用ES6类的信息,请参见可重用组件。 有关基类实际提供哪些方法的信息,请参见Component API。 React.createClass 给定规范,创建一个组件类。 组件实现了一个返回单个子对象的render方法。 该孩子可能具有任意深的孩子结构。 使组件与标准原型类不同的一件事是,您无需在它们上调用new。 它们是为您构造后备实例(通过新实例)的便捷包装。 回答1 MyComponent extends React.Component不支持的唯一React.createClass功能MyComponent extends React.Component是mixins。 要执行getInitialState()您可以执行以下操作: class MyComponent extends React.Component { constructor(props, context) { super(props
  • 使用 JSX react/react-in-jsx-scope 时,'React' 必须在范围内吗?('React' must be in scope when using JSX react/react-in-jsx-scope?)
    问题 我是一个 Angular 开发人员并且是 React 的新手,这是一个简单的 React 组件,但不起作用 import react , { Component} from 'react'; import { render } from 'react-dom'; class TechView extends Component { constructor(props){ super(props); this.state = { name:'Gopinath' } } render(){ return( <span>hello Tech View</span> ); } } export default TechView; 错误:使用 JSX react/react-in-jsx-scope 时,“React”必须在范围内 回答1 导入行应该是: import React, { Component } from 'react'; 注意 React 的大写 R。 回答2 将以下设置添加到.eslintrc.js / .eslintrc.json以忽略这些错误: rules: { // suppress errors for missing 'import React' in files "react/react-in-jsx-scope": "off", // allow jsx
  • 2021 年版本 React & React Hook & React Router 基础入门实战视频教程(10 个视频)
    2021 年版本 React & React Hook & React Router 基础入门实战视频教程(10 个视频) 2021 年到来,React 已更新到 17.0.0 版本,我们这套课程跟进最新版本,来入门并学习 React,学习 React Hook 和 React Router,从零开始实战一个全新项目,是国内最新的关于 React 的视频教程 React & React Hook & React Router 基础入门实战视频教程 01 介绍 React & React Hook & React Router 基础入门实战视频教程 02 创建 React 项目并了解项目源码 React & React Hook & React Router 基础入门实战视频教程 03 组件与模板 React & React Hook & React Router 基础入门实战视频教程 04 模板上的动态值 React & React Hook & React Router 基础入门实战视频教程 05 多个组件 React & React Hook & React Router 基础入门实战视频教程 06 添加样式 React & React Hook & React Router 基础入门实战视频教程 07 事件 React & React Hook & React Router
  • 无法解析模块“react-dom”(Cannot resolve module 'react-dom')
    问题 我看过很少有与此类错误相关的帖子。 但无法解决我的问题。 我的 package.json: "react": "~0.14.7", "webpack": "^1.12.13", "react-hot-loader": "^3.0.0-beta.6", . . 我在 webpack 上遇到以下错误: ERROR in ./public/src/main.js Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src @ ./public/src/main.js 19:16-36 但是在我做的时候在 cmd 行 npm -v react-dom 我得到 3.10.10。 react-dom 在那里。 但我想知道为什么它仍然会出现这个错误。 当我通过 npm "npm install react-dom" 安装 react-dom 并运行 webpack 时,出现以下错误: ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react
  • React Native invalid podfile “No such file or directory - ./node_modules/.bin/react-native.”
    In my react native project react-native@60.5 in the iOS dir I get this issue when running a pod install [!] Invalid `Podfile` file: No such file or directory - ./node_modules/.bin/react-native. # from /Users/username/appname/ios/Podfile:44 # ------------------------------------------- # > use_native_modules! # end # ------------------------------------------- This is a React Native fresh init from >@60.0; All worked perfect until I cleared my cache and installed node_modules with the following commands - this may have not been necessary or a good move on my part. watchman watch-del-all && rm
  • 减少 react.min.js 和 react-dom.min.js 的 Browserify 包(Reduce Browserify bundle of react.min.js and react-dom.min.js)
    问题 我想将一些 React 库与 Browserify 和--require它们--require在一起,但被文件大小推迟了。 我使用以下 Browserify 命令: browserify path/to/react.min.js path/to/react-dom.min.js > libs.js 现在,react.min.js 是 21k,react-dom.min.js 是 122k,但是 libs.js 的结果是惊人的 269k。 肯定没有 126k 的 Browserify 开销? 当我查看 libs.js 时,有很多添加的(未缩小的)React 代码。 这是从哪里来的? 回答1 问题是,被Browserify解决require在呼叫(一个或多个) react-dom的react在模块node_modules 。 该模块的package.json将main指定为react.js - 所以你最终得到一个包,除了react.min.js之外还包含非缩小源。 请注意,如果您只捆绑react.min.js : browserify \ --require ./node_modules/react/dist/react.min.js:react \ > bundle-react.js 包大小仅比react.min.js : ls -l node_modules/react
  • React/RCTDefines.h' file not found (RN0.61)
    Performed RN upgrade from RN0.60 to RN0.61. Build failed with iOS, due to the following issue: /react-native/React/Base/RCTBridgeModule.h:10:9: 'React/RCTDefines.h' file not found I am aware of this breaking changes. (React.xcodeproj is deprecated) Try a few things npx react-native-clean-project & re-setup project remove Pods/ & pod install ...running out of idea... Here's how my podfile looks like. pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" pod 'RCTRequired',
  • 未捕获的ReferenceError:未定义React(Uncaught ReferenceError: React is not defined)
    问题 我正在尝试使用本教程使ReactJS与rails一起使用。 我收到此错误: Uncaught ReferenceError: React is not defined 但是我可以在浏览器控制台中访问React对象我还按此处所述添加了public / dist / turbo-react.min.js,并且也按本答案中的描述在application.js中添加了//= require components必需//= require components行,但没有运气。 此外, var React = require('react')给出错误: Uncaught ReferenceError: require is not defined 谁能建议我解决该问题的方法? [编辑1] 供参考的源代码: 这是我的comments.js.jsx文件: var Comment = React.createClass({ render: function () { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.comment} </div> ); } }); var ready = function () { React
  • 我们可以在 react webapp 和 react native app 之间共享代码吗?(Can we share code between react webapp and react native app and is react-native production ready)
    问题 我们有一个用 reactjs 开发的小部件的稳定版本。 我们想开发相同的移动版本。 是使用 react native 开发并在 2 个应用程序之间共享代码更好,还是我们本地开发小部件更好。 请记住,我们在(react 和 android 开发)方面都拥有专业知识,但我们不想在再次开发整个应用程序上投入太多时间。 如果我们选择 react-native,是否有任何工具/资源可以更快地完成这项工作? 在线可用资源: http://jkaufman.io/react-web-native-codesharing/ https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html https://medium.com/@felipecsl/thoughts-on-react-native-from-an-android-engineers-perspective-ea2bea5aa078 干杯!!! 回答1 Instagram、Tesla、AirBnB、Di​​scord、Bloomberg 都有用 React Native 编写的生产应用程序。 我会让你自己决定它是否在你看来可以生产。 虽然 React Native 使您能够在 iOS 和 Android 之间进行重要的代码重用
  • ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 中的错误(ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js)
    问题 在这里反应菜鸟。 尝试克隆并运行 https://github.com/strangebnb/react-airbnb 我克隆。 运行 npm 安装。 然后 webpack 但我得到 ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37 ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src @ ./~/react-tap-event-plugin/src/TapEventPlugin
  • 找不到模块:无法解析'react-native' - React Native(Module not found: Can't resolve 'react-native' - React Native)
    问题 我刚刚开始学习 React Native,想在页面中添加输入字段。 我已经完成了本教程以添加输入字段。 但是每当我运行 React App 时,它都会抛出以下错误。 ./src/Inputs.js Module not found: Can't resolve 'react-native' in 'E:\hybrid\reactDemo\src' 我已经检查过 react-native node-modules 是否存在,然后我才知道 react-native 模块不存在。 我安装它再次运行该应用程序,但它显示相同的错误。 我已经为此花费了 8 多个小时,但无法解决此错误。 我已经尝试了谷歌的所有解决方案,但没有一个对我有用。 注意:我使用的是 Windows PC 更新 1:我正在导入 react-native,如下所示 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native' 更新 2: 这是我的 package.json 文件 { "name": "reactDemo", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.3.1", "react-dom": "^16.3.1"
  • React Router
    目录 一、React Router 1、React Router 的用途 2、React Router 的多元化 二、react-router 1、安装 react-router 2、react-router 的 API 三、react-router-dom(web 端推荐使用) 1、安装 react-router-dom 2、react-router-dom 的三种内置组件 (1)、路由组件 (2)、路由匹配组件 (3)、导航组件 四、react-router-redux 五、react-router-native 六、React Router 学习资源 一、React Router 1、React Router 的用途 保持 UI 与 URL 同步。 2、React Router 的多元化 React Router 提供了多个包: react-router:实现了路由的核心功能。提供了 router 的核心 api。如:Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的 api。react-router-dom:在 react-router 的基础上的扩展,新增了在浏览器运行环境下的一些功能。提供了 BrowserRouter、Route、Link 等 api,可以通过 dom 操作触发事件控制路由。react-router-native: 在