![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
沐浴 前端
前端学习者,希望未来能成为一个优秀的人,虚心若愚,求知若渴
展开
-
React中 Context和children属性
Context和children属性1.Context1.如果出现层级比较多的情况下,会使用Context来进行传递;2.作用:跨组件传递数据;//1.调用React.createContext() 创建Provider(提供数据)和Consumer(消费数据)两个组件const {Provider,Consumer} = React.createContext()//2.使用 Pro...原创 2020-01-29 14:35:30 · 1082 阅读 · 0 评论 -
React中组件的props和(父子,子父,兄弟)组件之间传递数据
React中组件的props和(父子,子父,兄弟)组件之间传递数据1.组件的props1.组件是封闭的,要接收外部数据应该通过props来实现;2.props作用:接收传递给组件的数据;3.传递数据:给组件标签添加属性;4.接收数据:函数组件通过参数props接收数据,类组件通过this.props接收数据;//函数组件chuan<App name="zs" age={18} ...原创 2019-12-16 20:00:01 · 822 阅读 · 2 评论 -
React表单处理中的受控组件和非受控组件
React表单处理中的受控组件和非受控组件1.受控组件1.HTML中的表单元素是可输入的,也就是有自己的可变状态;2.React中可变状态通常保存在state中,并且只能通过setState()方法来修改;3.React将state与表单元素值value绑定到一起,由state的值来控制表单元素的值;4.受控组件:其值受到React控制的表单元素;5.受控组件有文本框,富文本框,下拉框...原创 2019-12-16 19:03:08 · 309 阅读 · 0 评论 -
React中 事件绑定this指向三种方法
事件绑定 this 指向三种方法1.箭头函数1.利用箭头函数自身不绑定this的特点;2.render()方法中的this为组件实例,可以获取到setState();class App extends React.Component{ state ={ count: 0 } // 事件处理程序 onIncrement() { ...原创 2019-12-15 12:39:37 · 938 阅读 · 0 评论 -
React有状态和无状态组件,State和SetState基本使用
有状态和无状态组件,State和SetState1.有状态和无状态组件1.函数组件又叫做无状态组件,类组件又叫有状态组件;2.状态(state)就是数据;3.函数组件没有自己的状态,只负责数据展示;4.类组件有自己的状态,负责更新UI让页面动起来;2.State和SetState2.1 State的基本使用1.状态(state)即数据,是组件内部的私有数据,只能在组件内部使用;2...原创 2019-12-15 12:38:14 · 1066 阅读 · 0 评论 -
React事件处理(事件绑定,事件对象,很多支持的事件)
React事件处理1.事件绑定1.React事件绑定语法与DOM事件语法相似;2.语法:on+事件名称=事件处理函数,比如onClick = function(){};3.React事件使用驼峰命名法;4.类组件与函数组件绑定事件是差不多的,只是在类组件中绑定事件函数的时候需要用到this,代表指向当前的类的引用,在函数中不需要调用thisclass App extends React...原创 2019-12-15 11:19:34 · 583 阅读 · 0 评论 -
React组件(函数组件和类组件)
React组件(函数组件和类组件)1.创建组建的两种方式1.1 函数组件1.函数组件:使用js函数创建组件;2.约定:函数名称必须以大写字母开头( React 据此区分 组件 和 普通的React 元素),3.函数组件必须有返回值,表示该组件的结构;4.若返回值为null,表示不渲染任何内容;5.渲染函数组件:用函数名作为组件标签名,组件标签可以是单标签也可以是双标签;//函数组件...原创 2019-12-13 20:42:47 · 658 阅读 · 0 评论 -
React中JSX的使用(嵌入式js表达式,条件渲染,列表渲染,样式处理)
JSX的基本使用1.jsx产生原因及概述1.由于通过creatElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽;2.概述:JSX是JavaScript XML的简写,表示JavaScript代码中写HTML格式代码;3.优点:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率;2.JSX语法2....原创 2019-12-13 20:41:34 · 926 阅读 · 0 评论 -
React起源和特点及其使用方法(手动安装和脚手架工具使用)
React起源和特点及其使用方法(手动安装和脚手架工具使用)1.react的起源及其思想(简单概述)facebook内部的一个xhp项目,在页面上提交一个请求,由后台计算好数据以及新页面的结构返回给前端。这种方式没有异步ajax更新页面,新页面完全从后台返回,这样页面的状态就清晰,但是问题是没有异步更新,全部是后台返回这种方案用户体验非常不好所以是否能在前端有这么一个框架,帮我们去计算到...原创 2019-12-13 20:39:53 · 150 阅读 · 0 评论