Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux.修改app.jsimport React, { lazy, useState } from "react"; import { Button } from ‘antd‘; import { HashRouter as Router, Route, Link } from ‘react-router-dom‘;import GlobalContext from ‘./globalContext‘// 导入全局context import ‘./App.css‘; //import Hehe from ‘./hehe‘ //直接导入...
"管理RN的版本:"查看版本$react-native -v (进入你的项目,查看的就是你项目的版本)更新项目版本 npm(Node Package Manager)$npm update -g react-native查询网上RN最新的版本$npm info react-native升级或者降级RN 版本$npm install --save react-native@0.XX.X "安装插件"Mac下安装> 提示：如果没有`templets` 文件夹，你可以手动创建一个#### webstorm11安装路径将`ReactNative.xml`复制到 `~/Library/Preferences/We...
在教程开端先说些题外话，我喜欢在学习一门新技术或读过一本书后，写一篇教程或总结，既能帮助消化，也能加深印象和发现自己未注意的细节，写的过程其实仍然是一个学习的过程。有个记录的话，在未来需要用到相关知识时，也方便自己查阅。React既不是一个MVC框架，也不是一个模板引擎，而是Facebook在2013年推出的一个专注于视图层，用来构建用户界面的JavaScript库。它推崇组件式应用开发，而组件（component）是一段独立的、可重用...
一、react中使用pre标签react中代码：<pre>我寻你千百度 日出到迟暮一瓢江湖我沉浮我寻你千百度 又一岁荣枯可你从不在 灯火阑珊处 </pre>界面展示效果： 正常情况下，使用pre标签，pre标签中的内容都会原样展示，但是目前来看，并没有换行效果，这是因为JSX会去除换行，导致pre标签失效。二、解决方法 1、使用反引号即模板字符串来解决<pre id=‘preId‘>{`我寻你千百度 日出到迟暮 一瓢江湖我沉浮 我寻你千百度 又一岁荣枯 可你...
问题描述： 1. react组件中，组件中正执行某个请求，请求未结束时卸载该组件，请求使用promise，此时promise状态为pedding， 组件componentWillUnMount已经执行; 2. 重载该组件后，请求的promise会继续执行， 当时测试环境前提： TestComponent 父组件并未卸载 代码如下class TestComponent extends Component {componentDidMount(){}componentWillUnMount(){console.log(‘unMount‘)}async request(){await startReqesu...
Options API的弊端大组件的逻辑分散认识Composition APIsetup函数的参数setup函数的返回值setup不可以使用thisApp.vue<template><div><home message="hahahaha" ></home></div> </template><script>import Home from "./Home.vue";export default {components: {Home,},}; </script><style scoped></style> 02_setup的参数.vue<template><div><h3>Home Page</h3><h3>{{ message }}</h3><h2>{{ title }}</h2><h2>当前计数: {{ coun...
react相关问题就是生命周期、diff算法 setState流程、redux（流程 原理 以及关键步骤）、mobx对比优缺点 babel版本问题 怎么处理的 数据类型 原型链 继承 判断是不是对象 闭包 深拷贝。浅拷贝 Object.assign 二级以下是浅拷贝hasOwnProperty 判断是否是私有属性是否是对象 $.isPlainObject(obj) 纯粹对象Object.prototype.toString().call(obj)==‘‘[object Object]‘‘instanceof 是否是对象的实例(数组也可以)o...
普通传参传递 export default class App extends Component<> {constructor() {super();}render() {return (<View style={styles.container}><PropTest name = "呵呵"/></View>);} } 接收 export default class PropTest extends Component {render() {return <Text style={{fontSize: 28, color: ‘red‘}}>姓名:{this.props.name}</Text>} } 设置默认的参数子类组件 export default class PropTest extends Component {static de...
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中作用1) 通过标签属性从组件外向组件内传递变化的数据2) 注意: 组件内部不要修改props数据编码操作1) 内部读取某个属性值 this.props.propertyName2) 对props中的属性值进行类型限制和必要性限制 Person.propTypes = { name: React.PropTypes.string.isRequired, age: React.PropTypes.number.isRequired }3) ...
一、废除的生命周期 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本 由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数 componentWillMount componentWillRecieveProps componentWIllUpdate 二、新增的生命周期 static getDerivedStateFromProps(nextProps, prevState) {} [d?‘ra?vd] 用于替换componentWillReceiveProp...
###伸缩项目的属性 1.order 定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值 2.flex-grow 定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整数值 3.flex-shrink 定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值 4.flex-basis 用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认值为auto...
首先来看看Reactor模式，Reactor模式应用于同步I/O的场景。我们以读操作为例来看看Reactor中的具体步骤：读取操作：1. 应用程序注册读就需事件和相关联的事件处理器2. 事件分离器等待事件的发生3. 当发生读就需事件的时候，事件分离器调用第一步注册的事件处理器4. 事件处理器首先执行实际的读取操作，然后根据读取到的内容进行进一步的处理 下面我们来看看Proactor模式中读取操作和写入操作的过程：读取操作：1. 应用程序初始化一...
1）引入本地图片 <img src={require("../../../image/cart-img/catr.png")}/>2）把字符串渲染成HTML标签<div dangerouslySetInnerHTML={{__html:this.state.datainfo.descriptionDetail}}></div>this.state.datainfo.descriptionDetail ： "<p><img src="https://img.wochu.cn/upload/d31788f7-91d7-44fc-8fd8 /></p>"原文：https://www.cnblogs.com/rabbit-lin0903/p/11607012.html
因为配置less需要修改react的配置文件，所以要把项目配置文件抽离1$ yarn eject会多出config和script文件夹接下来安装lessyarn add less less-loader 或者 npm install less less-loader安装完成后打开config文件夹，找到webpack.config.js文件这里一共有三项需要修改 1.修改style files regexes（样式文件正则），找到 注释style files regexes，在这部分最后添加如下两行代码：12const lessRegex = /\.less$/;const...
我的第一个React应用接着我们上一期所讲的内容，通过create-react-app脚手架创建的应用，它是基于ES6的语法生成的。我们清空src目录下的文件，并分别创建index.js和index.css文件。cd my-app/src rm -rf * touch index.js touch index.css现在我们编辑index.js文件，import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root')...