![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
多动手,勤思考
阿布
展开
-
React笔记之事件绑定的写法
类组件的事件绑定 <button onClick={() => this.addN()}>n+1</button> 这种写法是正常的,传一个函数给onClick即可,注意大小写。 <button onClick={this.addN}>n+1</button> 这种写法是错误的,这样会使得 this.addN 里的 this 变成 window , 下面我们换几种正确的写法 <button onClick={this.addN.bind原创 2020-09-03 08:56:20 · 181 阅读 · 0 评论 -
React笔记之组件-复杂state的使用(4)
前置简介 上一节:https://juejin.im/post/6867454175781847047 我们简单说了state的使用,本节说明一下复杂的state使用方式。 如果state里不止有 n 怎么办? 类组件中 state 中有多个值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &原创 2020-09-03 08:55:41 · 423 阅读 · 0 评论 -
React笔记之组件-props和state的使用(3)
前置简介 上一节(https://juejin.im/post/6867429672347500551)说了如何使用props,这一节介绍一下state的使用。 代码在:https://codesandbox.io/s/dawn-shape-bofqp?file=/src/index.js index.js import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App()原创 2020-09-03 08:55:02 · 331 阅读 · 0 评论 -
React笔记之组件-props和state的使用(2)
如何在组件中使用props https://codesandbox.io/s/dawn-shape-bofqp?file=/src/index.js:488-492 ,首先这里是完整代码的链接,可以参考查看。 index.js import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { return ( <div className="App"原创 2020-09-03 08:54:30 · 133 阅读 · 0 评论 -
React笔记之组件-元素和组件(1)
前置简介 什么是组件? 组件就是能跟其他物件组合起来使用的物件。 const div = React.createElement('div',...), 这是一个React元素(div的开头d小写), const Div = () => React.createElement('div',...), 这是一个React组件(Div的开头D大写,并且是一个函数), 这种写法是React中元素与组件的约定写法, 就目前而言一个返回React元素的函数就是组件。 React两种组件 函数组件 funct原创 2020-09-03 08:53:57 · 218 阅读 · 0 评论 -
React笔记之入门-JSX条件判断与循环控制(4)
前置简介 上一节:https://juejin.im/post/6867027735979261959/ 上一篇说了JSX的使用,下面用一些篇幅描述一下JSX中的条件判断和循环控制是怎么使用的。 条件判断 在Vue中,条件判断是像下面这样的: <template> <div> <div v-if="n%2===0">n是偶数</div> <span>n是奇数</span> </div> &原创 2020-08-31 15:50:24 · 1155 阅读 · 0 评论 -
React笔记之入门-JSX初体验(3)
前置简介 上一节:https://juejin.im/post/6866982378301030408 我们讲解了基本的React使用,但是基础的写法太繁琐, 所以就有了 JSX , X标识拓展版,所以JSX就是JS拓展版。 Vue中有 vue-loader , .vue文件里写 template、script、style 三个标签,通过vue-loader就可以变成一个组件, 所以React就有了一个jsx-loader, 不过现在已经被babel-loader取代了,所以现在用的都是babel-load原创 2020-08-31 15:49:46 · 153 阅读 · 0 评论 -
React笔记之入门-React初体验(2)
前置简介 上一节: https://juejin.im/post/6866966785032355848/ 本章旨在通过react实现一个小功能,为了演示效果就先使用cdn的方式进行引入react。 创建项目 请通过上节说的cdn方式自行创建一个如下图红框中的文件结构目录下来。 index.css .red { color: red; } index.html <!DOCTYPE html> <html lang="en"> <head> <me原创 2020-08-31 15:49:12 · 143 阅读 · 0 评论 -
React笔记之入门-如何引入React(1)
如何引入React 使用cdn方式引入 首先进入 https://www.bootcdn.cn/ , 搜索 react 这里我们需要引入 react 和 react-dom 两个js文件 , react 将核心代码和对dom操作的代码分成了两个库, 所以我们需要分两次进行引入。 <script src="https://cdn.bootcdn.net/ajax/libs/react/16.9.0/umd/react.development.js"></script> <s原创 2020-08-31 15:48:34 · 2258 阅读 · 0 评论