React
congboer
这个作者很懒,什么都没留下…
展开
-
React的vscode插件
1、ES7 React/Redux/GraphQL/React-Native snippets2、Fullstack React/React Native snippets3、JS JSX Snippets4、React-Native/React/Redux snippets for es6/es75、Simple React Snippets6、TypeScript Importer...原创 2020-01-05 21:38:33 · 616 阅读 · 0 评论 -
React之高阶组件
React之高阶组件import React,{Component,Fragment} from 'react'import Test1 from './Test1.js'import Test2 from './Test2.js'/** 1、高阶组件:是一个函数,接收一个参数,参数是一个组件* 2、高阶组件的作用:让外层函数帮助内层组件完成任务,内层组件直接使用结果* 3、一些共...原创 2019-08-17 14:51:17 · 116 阅读 · 0 评论 -
React的组件通信方式
React的组件通信方式1、父子组件通信实现途径:通过属性绑定的形式(在父组件的模板中子组件的标签上,自定义属性,子组件通过props来接收)这里由于render(){ }函数是触发两次(初始化渲染时一次,数据修改渲染时再一次),所以,如果是发送请求得到数据,这里要先判断这个数据有没有,用短路逻辑,如果有,再渲染,如果第一次没有,比如就定义了这个状态数据,而值为null,渲染就会报错。父...原创 2019-08-17 09:34:53 · 213 阅读 · 0 评论 -
ref绑定、class、value值、列表渲染、dangerouslySetInnerHTML
1、一般针对输入框:推荐用第二种<input type = "text" ref = "inp"/>通过this.refs.inp可以访问这个input框即:this.refs.inp.value就是input框里面的内容<input type = "text" ref = { el => this.inp = el }/>通过el就会少一层,el代表的...原创 2019-08-16 20:47:39 · 717 阅读 · 0 评论 -
Flux流程
Flux流程1、要想使用FLux架构思维,需要通过一个工具进行使用, 这个工具就是flux2、安装 flux $ yarn add flux3、在src目录下 新建store目录,里面新建index.jsstore有两个功能存储数据当数据发生改变时,视图要进行更新 ( 当前组件中的state发生了改变,从新从store中获取数据,要想重新复制,那么要通过事件的发布,订阅 )...原创 2019-08-25 17:11:05 · 211 阅读 · 0 评论 -
React的组件创建、样式写法、数据的状态和属性、属性验证prop-types
React的组件创建、样式写法、数据的状态和属性、属性验证prop-types一、组件的创建1、函数式组件(无状态组件 prueCcmponent)import React,{Fragment} from 'react'function Comp(){ return ( <Fragment> <div>content</di...原创 2019-08-16 09:24:28 · 867 阅读 · 0 评论 -
React配置反向代理、路由(展示、导航、组件)、better-scroll、1px兼容、数据请求时loading效果、react-hooks、lodash、immutable.js
React的一些点1、配置反向代理:在 src 目录下新建一个名为setupProxy.js的文件(必须是这个文件名),先要安装cnpm i http-proxy-middleware -D,再const proxy = require('http-proxy-middleware')引入。const proxy = require('http-proxy-middleware')mo...原创 2019-08-25 16:04:51 · 1067 阅读 · 0 评论 -
React的属性(props)
React的属性(props)以及属性验证(propTypes)1、属性props//父组件import React,{Component} from 'react'import Son from './Son.js'// 函数式组件const Content=(props)=>{ //函数式组件不需要this return <h3>233{pro...原创 2019-07-11 18:01:03 · 160 阅读 · 0 评论 -
React的事件和组件通信
一、组件通信:1、父子组件通信2、子父组件通信3、非父子组件通信4、跨组件通信二、事件1、直接在render里写行内的箭头函数(不推荐),这种污染了html结构2、在组件内使用一个箭头函数来定义一个方法(推荐)3、直接在组件内定义一个非箭头函数的方法,然后在render里面直接使用 onClick={this.handleClick.bind(this)}(不推荐)4、直接...转载 2019-07-13 11:47:26 · 134 阅读 · 0 评论 -
React中获取input框的输入值
React中获取input框的输入值import React,{Component,Fragment} from 'react'class Shijian extends Component{ constructor(){// super() this.state={ flag:true, msg:''...原创 2019-07-13 11:00:27 · 1640 阅读 · 0 评论