React学习
CHNMSCS
分享是一种快乐,
脚踏实地,仰望星空
展开
-
学习React(26) - Forwarding Refs
Left forwarding is a technique for automatically passing a ref through a component to one of its children.在上一篇的博客中,介绍了当点击按钮时,对应的输入框就会出现光标,现在就用别的方法来实现这个功能// FRInput.js 文件import React from 'react'const FRInput = React.forwardRef((props, ref) => {原创 2020-07-05 11:21:14 · 132 阅读 · 0 评论 -
学习React(25) - 介绍refs to DOM elements
这篇博文是讲,如何attach refs to DOM elements and also class component in react.咋们就直接上代码:// Input.js 文件import React, { Component } from 'react'class Input extends Component { constructor(props) { super(props) this.inputRef = React.crea原创 2020-07-05 07:56:10 · 145 阅读 · 0 评论 -
学习React(24) - 介绍Refs的用法
// RefsDemo.js 文件import React, { Component } from 'react'class RefsDemo extends Component { constructor(props) { super(props) // 用到这个方法createRef() this.inputRef = React.createRef() // call back ref this.cbRef原创 2020-07-05 05:57:29 · 144 阅读 · 0 评论 -
学习React(23) - memo 的介绍
创建一个文件,MemoComponent.js// MemoComponent.js 文件import React from 'react'function MemoComponent({name}) { console.log("Memo Component") return ( <div> {name} </div> )}// react-dom: 16.6.0 以上的版本才能用exp原创 2020-07-05 03:29:23 · 253 阅读 · 0 评论 -
学习React(22) - 介绍Pure components
今天,就介绍一下pure components, 博主也不知道怎么翻译成中文才正确,就先用英文吧!这个得创建三个文件:第一个文件// PureComponent.js 文件import React, { PureComponent } from 'react'class PureComp extends PureComponent { render() { console.log("Pure component") return (原创 2020-07-05 03:15:24 · 619 阅读 · 0 评论 -
学习React(21) - Updating 生命周期方法介绍
static getDerivedStateFromProps(props, state), 这个方法is called every time a component is re-rendered.这个方法返回either null or an object that represents the updated state of the component.This method is used when the state depends on the props of the componen..原创 2020-07-04 13:36:23 · 175 阅读 · 0 评论 -
学习React(20) - Mounting Lifecycle 方法的介绍
在Mounting Lifecycle 方法里,一共有四种方法,接下来会一个一个的说明。先说 constructor(props) 方法A special function that will get called whenever a new component is created.可以用这个方法来initializing state, binding the event handlers to the class instance. 但是,这个构造函数不能cause any side eff原创 2020-07-02 14:26:52 · 163 阅读 · 0 评论 -
学习React(19) - 组件生命周期方法 (Component lifecycle methods)
React给我们提供了建立的方法,我们就可以用这些方法来override 在一些特殊的stages。这些方法不能在函数模块中使用。将这些方法分为四种类别。Mounting: When an instance of a component is being created and inserted into the DOM.这里一共有四种方法:constructor, static getDerivedStateFromProps, render, and componentDidMount.原创 2020-07-02 08:17:19 · 459 阅读 · 2 评论 -
学习React(18) - Form表单的运用
做网页,大部分情况下是离不开表单的运用。现在,就把如何用react来表示表单。在src文件夹下创建一个文件:// Formstyle.js 文件import React, { Component } from 'react'class Formstyle extends Component { constructor(props) { super(props) this.state = { username: '',原创 2020-07-02 07:26:42 · 461 阅读 · 0 评论 -
学习React(17) - 样式和基本的CSS (Styling and CSS basics)
在React中,有几种形式可以表示CSS在React中.CSS stylesheetsInline stylingCSS ModulesCSS in JS Libraries (Styled Components)现在先介绍 stylesheets在src文件夹下创建两个文件,一个叫Stylesheet.js 文件,另一个叫做myStyle.css文件。先是Stylesheet.js文件代码://Stylesheet.jsimport React from 'react'// 调用原创 2020-07-02 05:49:37 · 252 阅读 · 0 评论 -
学习React(16) - 在list里使用index来做为key
在上一篇中,稍微提了一下key的用法,现在又说一下。大家都知道,在数组里,是有index来做下标的,那么想要在列表里表现出index, 那应该如何用react来表现一下呢。还是使用上一篇的Namelist.js 文件,只是这回没有用Parson.js 文件。现在就直接上Namelist.js文件代码:// Namelist.js 文件import React from 'react'function Namelist() { const names = ['Bruce', 'Clark',原创 2020-06-30 08:39:30 · 615 阅读 · 0 评论 -
学习React(15) - 列表渲染 (list rendering)
在做网站时,大部分时候我们都需要在网址上做列表,比如说姓名列表等。那么在React里,应该如何实现这个功能呢?那就请看这篇博客吧!在src文件夹下面创建一个名为Namelist.js 文件,下面是代码:// Namelist.js 文件import React from 'react'function Namelist() { const names = ['Bruce', 'Clark', 'Diana'] return ( <div>原创 2020-06-30 06:46:21 · 396 阅读 · 0 评论 -
学习React(14) - 条件渲染 (conditional rendering)
当我们要建立react app的时候,你有可能需要展示或者隐藏某些HTML内容基于某些条件。很幸运的,条件渲染在React的做法跟javascript是一样的。在React中,一共有四种方法。if / elseElement variableTernary conditional operatorshort circuit operator小记:在VS Code,如果想使用class component, 那么可以打rce,然后按Enter键,就出现了,代码如下:import React,原创 2020-06-29 14:32:59 · 260 阅读 · 0 评论 -
学习React(13) - 使用props的方法
关于React的一些知识点,之前的博客已经讲了差不多了,现在也就不多说什么了,就直接上代码,通过代码就稍微说一下吧。在src 文件包里,创建两个文件,一个叫做Testparentcomponent.js 文件,另一个叫做 Childcomponent.js 文件。先是 Testparentcomponent.js 文件代码展示:// Testparentcomponent.js 文件import React, {Component} from 'react'import Childcomponen原创 2020-06-29 12:57:30 · 238 阅读 · 0 评论 -
学习React(12) - setState 的方法
现在来写写有关setState的用法,代码如下:// Testsetstate.js 文件import React, {Component} from 'react'class testSetState extends Component { constructor(props){ super(props) this.state = { count: 0 } } increment(){原创 2020-06-27 12:47:07 · 171 阅读 · 0 评论 -
学习React(11) - State 的用法在class 中
下面是列举State 和 props的比较propsstateprops get passed to the componentstate is managed within the componentFunction parametersVariables declared in the function bodyprops are immutablestate can be changedprops - Functional ComponentsuseSt原创 2020-06-27 08:59:00 · 998 阅读 · 0 评论 -
学习React(10) - props的用法在functional component
在之前的博客里,博主写了怎么在class component和JSX里使用props了,那么现在博主将演示怎么在functional component里用props. 还是在src文件夹下创建一个Testprops.js文件。// Testprops.js文件import React from 'react'function testprops(props) { console.log(props); return ( <div>原创 2020-06-27 07:27:14 · 721 阅读 · 0 评论 -
学习React(9) - props 的用法在class component
上一篇文章,提到如果用JSX格式来用props,应该怎么用。现在这一篇是写在class component里应该如何使用props呢。还是一样,在src 文件夹里创建一个Testprops.js文件,代码如下:// Testprops.js 文件import React, {Component} from 'react'class testprops extends Component { render() { return ( // 如果在return里原创 2020-06-27 07:05:36 · 373 阅读 · 0 评论 -
学习React(8) - props的用法在JSX格式
这篇都是用JSX格式来写的,如果有哪里有错误,就请指出来吧!先上代码,然后再根据代码来讲解一下。还是一样,在src 文件包里,创建一个文件,博主就命名为Testprops.js了// Testprops.js 文件import React from 'react'// 博主认为props就是一个参数,只是大家已经习惯用这个props来做参数// 博主也试了如果用其他名字做为参数,比如说 pro, 用pro.name 也是能显示结果的const testprops = (props) =>原创 2020-06-27 06:45:23 · 525 阅读 · 0 评论 -
学习React(7) - JSX
在上一篇的学习React(6) - Class 组件(Component) 中,有写到用JSX格式,和没有用到JSX格式,那么现在就来总结一下JSX的不同之处:class 变成 classNamefor 变成 htmlForcamelCase 法则来命名,比如说:onclick 变成 onClicktabindex 变成 tabIndex...原创 2020-06-26 15:50:09 · 119 阅读 · 0 评论 -
学习React(6) - Class 组件(Component)
博主将继续学习React, 如果用class 这个关键字来做组件的话,应该如何来实现呢!之前是在App.js 文件里用class component, 现在就不在App.js 文件里实现。就直接上代码,还是一样在src文件夹里,创建一个文件:// 这是Testclasscomponent.js 文件// 使用Class Component来写的import React, {Component} from 'react';class Testclass extends Component{原创 2020-06-26 14:56:49 · 996 阅读 · 0 评论 -
学习React(5) - 组件 Component
组件是用来描述一部分的用户界面。组件是可以重复利用的,而且还可以嵌套在其他组件中。组件类型:(1)无状态功能组件 Stateless Functional Component采用JavaScript Functionsfunction Welcome(props) { return <h1>Hello, {props.name}</h1>;}那么在App.js 文件中,应该如何写呢:import React from 'react';import './Ap原创 2020-06-24 14:09:14 · 146 阅读 · 0 评论 -
学习React(4) - 文档结构介绍
博主忘记介绍当在VS Code安装好React 之后,会出现三个文件包和四个文件,没有介绍。现在博主就补回来,然后在下面会介绍。package.json 文件:This file contains the dependencies and the scripts required for the project. You can see that I am using react version and that is listed as a dependency. I also have a few原创 2020-06-24 13:20:54 · 163 阅读 · 2 评论 -
学习React (3) - 如何用Jumbotron
已经学会了怎么用React来写Hello World, 那么下一步就开始学习React那些组件。现在就先讲讲Jumbotron.这个Jumbotron 大部分用在bootstrap里面的,采用官方的解释什么是Jumbotron: A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.就直接上代码:还是同一个道理,在src文原创 2020-06-23 14:05:16 · 372 阅读 · 0 评论 -
学习React(2) - 用react 来写Hello World
在上一篇的学习React(1) 中已经介绍如何在VS Code中用react, 那么现在就将展示如何用react来写Hello World.第一步:先得在src文件夹下,创建一个js文件名, 博主就将这个文件名命名为:HelloWorld.js 。第二步:在 HelloWorld.js 文件里写入这几行代码:import React from 'react';const HelloWorld = (props) => { return( <h1>Hel原创 2020-06-22 15:01:46 · 459 阅读 · 0 评论 -
学习React (1) - VS Code里创立react app
先介绍什么是React:React is a JavaScript library for building user interfaces.React is a library and not a framework. React needs an outside library for state management and an outside library to make Ajax calls.博主是在VS Code来进行学习React的。现在博主就将如何在VS Code上创造React原创 2020-06-22 12:05:14 · 1326 阅读 · 0 评论