![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
Lnewbie
笨鸟先飞
展开
-
react的基础语法jsx
1.jsx写html标签class App extends Component { render() { return ( <div className="App"> hello dell li </div> ); }}2.写自定义标签,首字母要大写import App from './App';i...原创 2019-04-15 23:48:50 · 75 阅读 · 0 评论 -
虚拟dom
1.state更新1.1state数据1.2 JSX模板1.3 生成虚拟DOM (虚拟DOM就是一个JS对象, 用它来描述真实DOM) (损耗了性能)1.4数据+模板结合,生成真实的DOM,来显示1.4 state发生改变1.6 数据 + 模板 生成新的虚拟DOM (极大的提升了性能)1.7 比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中内容 (极大的...原创 2019-04-28 08:02:51 · 120 阅读 · 0 评论 -
PropTypes与DefaultProps的应用
1.propTypes主要用于限制父组件传递给子组件的数据类型TodoItem.propTypes= {content: propTypes.string,deleteItem: PropTypes.fun,index: PropTypes.number}2.defaultProps如果父组件没有传值,则使用这个默认值TodoItem.defaultPro...转载 2019-04-22 00:30:47 · 126 阅读 · 0 评论 -
Reactdevelpertools安装及使用
1.安装在google浏览器,设置----更多工具----程序扩展-----应用商店2.使用在用debug调试页面时,使用它,可以方便的查看state的属性.转载 2019-04-22 00:13:24 · 136 阅读 · 0 评论 -
围绕React衍生出的思考
1.声明式开发2.可以与其他框架并存3.组件化4.单向数据流5.视图层框架6.函数式编程转载 2019-04-21 23:57:41 · 103 阅读 · 0 评论 -
拆分组件与组件之间的传值
1.通过属性传递父组件content={item}子组件接收this.props.content优化写法const {deleteItem, index} = this.props;deleteItem(index);转载 2019-04-21 23:55:54 · 109 阅读 · 0 评论 -
Jsx语法细节
1.注释{/**/}2.dangerouslySetInnerHTML保留原文本的样式不改变3.光标切换htmlFor=“innertArea”id="innertArea"原创 2019-04-21 23:08:39 · 104 阅读 · 0 评论 -
react开发环境准备
1.引入.js文件来使用React对性能有影响2.通过脚手架工具来编码官方:create-react-app2.1安装create-react-app2.1.1安装node.js和npmnode.js官网:https://nodejs.org/en/download/2.1.2 安装create-react-appnpm install -g creat...原创 2019-04-13 17:24:09 · 183 阅读 · 0 评论 -
实现TodoList新增删除功能
import React, { Component,Fragment} from 'react';import logo from './logo.svg';import './App.css';class TodoList extends Component { constructor(props){ super(props); this.st...原创 2019-04-16 08:27:16 · 379 阅读 · 0 评论 -
React中ref使用
1.ref用来获取dom的值2.和setState使用时,注意setState是异步函数,单独使用获取数据会不准确,可以写在它的回调里.原创 2019-04-29 07:25:49 · 131 阅读 · 1 评论