![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
小陈小陈 满眼星辰
这个作者很懒,什么都没留下…
展开
-
React Refs
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticf.原创 2021-01-14 17:18:43 · 112 阅读 · 0 评论 -
React 组件生命周期
组件的生命周期可分成三个状态:Mounting: 已插入真实DOM Updating: 正在被重新渲染 Unmounting: 已移除真是DOM生命周期的方法有:componentWillMount: 在渲染前调用,在客户端也在服务端; componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。如果你想和其他的JavaScript框架一起使用,可以在这个方法中调用setTimeout,set原创 2021-01-14 17:17:16 · 130 阅读 · 0 评论 -
React 组件API
一、设置状态 setStatesetState(object nextState[, function callback])nextState 将要设置的新状态,该状态汇和当前的state合并 callback 可选参数,非必填,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。class Counter extends React.Component{ constructor(props原创 2021-01-14 11:21:04 · 237 阅读 · 0 评论 -
React 列表 & Keys
React 列表 & Keysconst numbers = [1,2,3,4,5];const listItems = numbers.map((number) => <li key={number}>{number}</li>);ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example'));注意:每个列表元素分配一个key,不.原创 2021-01-14 08:59:55 · 94 阅读 · 0 评论 -
React 条件渲染
元素变量<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.原创 2021-01-13 16:27:37 · 67 阅读 · 0 评论 -
为什么React要区分Class和function定义的组件?
React内部通过调用组件的定义来获取被渲染的节点,而对于不同的组件定义方式,其获取节点的步骤也不一样。<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"&g原创 2021-01-13 11:58:32 · 197 阅读 · 0 评论 -
React Props
一、React Propsstate和props的主要区别在于props是不可变的,而state可以根据与用户交互来改变;这就是为什么有些容器组件需要定义state来更新和修改数据,而子组件只能通过props来修改数据。二、使用Propsfunction HelloMessage(props) { return <h1>Hello {props.name}</h1>;}const element = <HelloMessage name=".原创 2021-01-11 11:32:13 · 90 阅读 · 0 评论 -
React State(状态)
一、React State(状态)React把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,如何渲染UI,让用户界面和数据保持一致。React里,只需更新组件的state,然后根据新的state重新渲染用户界面(不要操作DOM)。添加一个类构造函数来初始化状态this.state,类组件应始终使用props调用基础构造函数。class Clock extends React.Component { constructor(props) {原创 2021-01-08 16:53:38 · 128 阅读 · 0 评论 -
React组件
一、介绍React组件的基本使用React使用函数定义组件,接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage。<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>菜鸟教程 React 实例</title><script src="https://cdn.staticfile.org/react/16.原创 2021-01-07 16:26:47 · 96 阅读 · 1 评论 -
ReactDOM.render(...) 渲染方法
React代码的书写格式和以前的JS有很大的不同,下面通过对这段代码进行分析了解一下他。以前使用Javascript定义一个变量用var,ES6加入了const关键字,用来定义一个常量:const div = document.createElement('div');ReactDOM.render(...)是渲染方法,所有的js,html都可通过它进行渲染绘制,他有两个参数,内容和渲染目标js对象。内容: 就是要在渲染目标中显示的东西,可以是一个React部件,一段HTML或TEXT文原创 2020-12-25 17:05:13 · 10319 阅读 · 0 评论 -
使用 create-react-app 快速构建 React 开发环境
使用 create-react-app 快速构建 React 开发环境cnpm install -g create-react-app // 全局安装create-react-app,如果不想全局安装,则不要-gcreate-react-app my-app // my-app是项目名cd my-appnpm start // 启动项目浏览器运行http://localhost:3000/即可...原创 2020-12-25 15:58:45 · 91 阅读 · 0 评论