![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
那是遇知吧
Life is but a walking shadow
展开
-
React之useRef的简单用法-获取input里面的值
useRefimport {useRef} from 'react'const inputVal = useRef(null)const inputValOpt=()=>{ console.log(inputVal.current.state.value) console.log(inputVal.current.input.defaultValue)}<input type='text' ref={inputVal }/><button onC.原创 2021-04-19 17:27:09 · 5835 阅读 · 5 评论 -
每日一练29:antd-design框架搭建表格功能-增删功能
首先说下功能是表格数据展示,点击增加会出来一个表单弹框,删除用户直接调接口删除就行1:首先写个新增用户按钮import {PlusOutlined} from '@ant-design/icon'<Button icon={<PlusOutlined/>} type="primary" onClick={()=>{showModal()}>新增用户<Button>2:写个表单modalimport React,{useState} from原创 2021-04-19 15:56:09 · 621 阅读 · 0 评论 -
React学习总结part2:react-hooks的useState,useContext ,useReducer,useEffect
useStateuseState的优点:便于管理数据的状态,多次声明状态的方式更加方便 useState的缺点:处理多层嵌套数据逻辑,比较吃力index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import Routers from './project/router.js';import * as serviceWorker from './service原创 2020-11-02 16:09:52 · 305 阅读 · 0 评论 -
React简单个人网站项目记录Part2 - 关于
关于页面功能编写import React from 'react'import "../About/index.scss"import { Row, Col,Typography } from 'antd';import whiteRoseImg from '../../assets/image/white_rose.png';const { Title ,Text} = Typography;function About() { return ( <div class.原创 2020-10-27 18:50:29 · 131 阅读 · 2 评论 -
React简单个人网站项目记录Part1 - 安装项目和依赖、首页、路由
安装项目:npm install -g create-react-app create-react-app my-app cdmy-app yarn start npm install react-router-dom yarn add antd yarn add sass-loader node-sass --save-dev原创 2020-10-27 18:43:31 · 213 阅读 · 1 评论 -
React学习总结part1:redux是什么、react-redux
redux作用:集中式管理react应用中多个组件共享的状态redux和react没有任何关系 redux是一个状态管理器 redux相当于一个公共的容器来存放数据,哪个组件需要,就可以直接调用redux的三个核心APIstore(相当于一个容器,用来保存数据的地方,整个项目中有且只能有一个 创建方式 Redux.createStore()) action(相当于记录了需要通知的各种方法。它是一个对象,有个type属性 写法:const action = {type:'ADD..原创 2020-10-23 18:44:41 · 165 阅读 · 0 评论 -
先學30天React再說之setInterval(Part2)
轉自《菜鳥教程》react一文更新元素渲染React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法setInterval事件用法:第一種寫法:<div id="example"></div><script type="text...原创 2019-03-27 16:53:02 · 117 阅读 · 0 评论 -
先學30天React再說之JSX(Part3)
React JSXReact 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX,但它有以下优点:JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的,在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 JSX 里的class...原创 2019-03-27 17:29:47 · 110 阅读 · 0 评论 -
先學30天React再說之React 组件(Part4)
轉自菜鳥教程先來看一個例子:<div id="example"></div><script type="text/babel">function HelloMessage(props) { return <h1>Hello React!</h1>;}const element = <HelloMessage /...原创 2019-03-28 17:02:44 · 107 阅读 · 0 评论 -
先學30天React再說之React 小遊戲(Part5)
前面學習了關於react的一些知識,這次來總結一下,這些知識的運用。參考了官網的教學,總結如下。參數說明:render:方法的返回值描述了你希望在屏幕上看到的内容,更具体地来说,render返回了一个React 元素。 props:一个组件接收一些参数,我们把这些参数叫做props(“props” 是 “properties” 简写)。 this.state来初始化 sta...原创 2019-04-22 17:29:04 · 159 阅读 · 0 评论 -
先學30天React再說之react基礎進階(Part6)
首先學習最簡單的輸出Hello React一:1:運用function簡歷組件,運用function的props前面不用加thisfunction HelloMessage (props){ return( <h1>{props.content}</h1> )}ReactDOM.render( <HelloMessage co...原创 2019-08-09 17:12:32 · 85 阅读 · 0 评论 -
先學30天React再說之Reactjs 大解密(Part8)
[Reactjs] Reactjs 大解密React 揭秘關於這篇文章將會試著解釋關於 React 核心的概念。鳥瞰架構在傳統的網頁應用程式中,我們如果要增加互動性時勢必廣泛的操作 DOM 元素,一般來說現在最普遍的技術是使用jQuery:上圖我們故意讓 DOM 示意為紅色這是因為操作更新 DOM 是需要付出昂貴的代價,也意味著這很吃效能。很多時候我們會使用 Mode...转载 2019-08-12 15:54:59 · 94 阅读 · 0 评论 -
先學30天React再說之react基礎進階(Part9)
本文是參菜鳥教程《React 条件渲染》一文來學習和總結的。1:點擊button互相切換<div id="example"></div><script type="text/babel">class Allbox extends React.Component { constructor(props) { super(props);...原创 2019-08-14 17:06:56 · 68 阅读 · 0 评论 -
先學30天React再說之react元件運作與生命週期(Part7)
關於虛擬 DOMReact 快速的原因是因為它從來不直接影響 DOM。React 會負責在記憶體中持續維護一份 DOM 的表現結構。render()方法負責回傳關於 DOM 的描速,React 就能得知其和記憶體中結構的差異,接著他會計算出最快的更新方式然後交給瀏覽器去影響 DOM。此外,React 完整實作了對應的事件系統,所有物件的事件保證符合 W3C 的規範,且關於事件氣泡傳遞(bu...转载 2019-08-12 14:45:29 · 141 阅读 · 0 评论 -
先學30天React再說之元素渲染(Part1)
React 教程轉自菜鳥教程的《React》一文元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。React 簡介React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2...原创 2019-03-27 16:28:07 · 105 阅读 · 0 评论