随笔分类 -  react

react context
摘要：写一个切换页面主题的demo App.js import ThemeContext from './theme-context' import ThemeBar from './component/ThemeBar' const theme = { light: { className: 'btn 阅读全文
posted @ 2020-11-03 19:39 氧化成风 阅读(89) 评论(0) 推荐(0)
react 组件传递
摘要：状态提升：当两个以上组件使用同一个数据时，将数据提升到父组件中 数据流向： 父组件传递到子组件中 CommentList.js import React from 'react' const CommentList = ({comments})=>{ return( <div className=" 阅读全文
posted @ 2020-10-31 17:05 氧化成风 阅读(109) 评论(0) 推荐(0)
react 表单
摘要：受控组件：import React from 'react'; class CommentBox extends React.Component{ constructor(props){ super(props) this.state = { value: '' } this.handleChang 阅读全文
posted @ 2020-10-31 10:29 氧化成风 阅读(81) 评论(0) 推荐(0)
react 生命周期
摘要：初始化 componentDidMount 更新 componentDidUpdate 销毁 componentWillUnmount 电子时钟： class Clock extends React.Component{ constructor(props){ super(props) this.s 阅读全文
posted @ 2020-10-30 17:15 氧化成风 阅读(78) 评论(0) 推荐(0)
react 点赞
摘要：import React from 'react'; class Likes extends React.Component{ constructor(props){ super(props) this.state = { likes: 0 } // this.increaseLikes = thi 阅读全文
posted @ 2020-10-30 16:58 氧化成风 阅读(207) 评论(0) 推荐(0)
react-jsx
摘要：react 中使用 bootstrap: 安装： npm install bootstrap --save 引入： import 'bootstrap/dist/css/bootstrap.min.css'; (在index.js中引入) NameCard 组件： NameCard.jsimport 阅读全文
posted @ 2020-10-30 16:48 氧化成风 阅读(77) 评论(0) 推荐(0)
react-1
摘要：安装： npm install create-react-app -g create-ract-app my-project 组件： 组件welcom.jsimport React from 'react'; class welcome extends React.Component{ render 阅读全文
posted @ 2020-10-30 14:47 氧化成风 阅读(143) 评论(0) 推荐(0)
react中的虚拟DOM和Diff
摘要：虚拟dom： DOM的本质是什么：浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM 对象的API； 什么是React中的虚拟DOM：是框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套； 为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中， DOM 阅读全文
posted @ 2020-09-01 10:48 氧化成风 阅读(153) 评论(0) 推荐(0)