React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)
摘要:
写一个todoList小案例来体验一下组件的状态以及状态维护的注意点 import React, { Component } from 'react' import './css/01-index.css' export default class App extends Component { s
React学习笔记12-循环渲染
摘要:
在vue中我们一般是通过v-for指令来进行循环渲染的,但react中没有封装相关指令供我们调用 在react中我们可以通过数组的map方法来进行数据的循环渲染 import React, { Component } from 'react' export default class App ext
React学习笔记11-状态(state)
摘要:
状态就是组件的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态 的目的就是为了在不同的状态下使组件的显示不同(自己管理) 定义状态的方法 可以在构造函数中定义也可以直接在类中通过变量的形式来定义 /* eslint-disable eqeqeq */ import React, { Co
React学习笔记10- Ref的应用
摘要:
用法 1.给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象 写法 import React, {
React学习笔记09- 事件处理
摘要:
React采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写 onclick , React里的事件是驼峰 onClick ,React的事件并不是原生事件,而是合成事件。 事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法,然后在render里直接
React学习笔记08- 组件的样式
摘要:
1.使用行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现: // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要
React学习笔记07-组件嵌套
摘要:
一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系 在react中如果想要将一个组件嵌入到另外一个组件中 只需要在父组件的render函数的返回值中放入子组件即可 请看下面代码 import React, { Component } from "react" class Navbar
React学习笔记06-函数式组件
摘要:
函数式组件即在React中通过函数的方式来声明一个组件 import React from "react" function App() { return ( <div> 函数式组件 <div>hhh</div> </div> ) } /* 16.8之前 //无状态 16.8之后 react hoo
React学习笔记05-类组件
摘要:
ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承, ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码 import React from 'react' import ReactDOM from '
React学习笔记04-JSX语法
摘要:
1.JSX语法 JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执行。 在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码 更加直观并易于维护。 编译过程由Babel 的