第二天

01 关于Vue和React中key的作用

在循环的时候一定要为组件加key

02关于jsx语法的注意事项

jsx中的注释 {/*  */}

class要写成className

label标签的for要写成htmlFor

所有节点必须要有唯一根元素进行包裹

03创建组件的第一种方式并为组件传递props

function Hello(props){

//return null 表示此组件什么都不会渲染

return <div>这是一个组件{props.age}</div>

}

ReactDOM.render(<Hello age=’12’></Hello>,document.getElementById(‘a’));

//不论是React还是Vue中,props永远是只读的。

04使用ES6展开运算符简化传递props数据的过程

ReactDOM.render(<Hello {…obj}></Hello>,document.getElementById(‘a’));

05将组件抽离为单独的js文件

注意:组建名称首字母必须是大写,否则会被认为是一个html标签,babel编译时候也会出错,提示不存在这个html标签。

Hello.jsx:

import React from ‘react’

function Hello(props){

return …

}

export default Hello;

在index.js中

//默认如果不做配置的话,不能省略.jsx后缀名

import Hello from ‘./src/components/Hello.jsx’

06 配置webpack从而在导入组件的时候,省略.jsx后缀名

resolve是和这些配置项平级的:

07配置webpack设置根目录

在resolve中添加alias别名对象:

08 class-创建类并通过constructor挂载实例属性

了解es6中的class类:

09 class-使用static创建静态属性

通过构造函数直接访问到的属性,叫做静态属性

10.实例方法和静态方法

这个js文件写的非常详细,要好好看,

test.js:

function Person(name, age) {

this.name = name;

this.age = age;

}

//实例化对象

/*

1.在堆中开辟一块内存

2.把name = whh, name = 12挂载在内存中

3.将内存中的指针引用交给p1

*/

var p1 = new Person('whh', 12);

//info属性,直接挂载给了构造函数,所以是静态属性

Person.info = 'aaaa'

Person.prototype.say = function () {

console.log('这是Person的实例方法');

}

Person.show = function () {

console.log('这是Person的静态方法')

}

//实例方法位于p1对象的__proto__原型上

//静态方法位于p1对象的__proto__的constructor(即Person构造函数)上

console.log(p1);

p1.say();

class Animal {

//每一个类中,都有一个构造器如果我们不写就默认有一个隐形的空构造器

constructor(name, age) {

//实例属性

this.name = name;

this.age = age;

}

//在class内部,通过static修饰的属性就是静态属性

static info = 'eee'

静态属性

静态属性指的是 Class 本身的属性, 即Class.propname, 而不是定义在实例对象( this) 上的属性。

1
2
3
class Foo {}
Foo.prop = 1;
Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

class Foo{
   static prop = 1
}

//这是动物的实例方法 今后会经常用实例方法,静态方法不经常用

jiao() {

console.log('这是动物的实例方法');

}

static show(){

console.log('这是动物的静态方法');

}

}

console.log('============');

var a1 = new Animal('dahuang', 12);

//实例方法位于a1对象的__proto__原型上

//静态方法位于a1对象的__proto__的constructor(即Person构造函数)上

console.log(a1);

console.log(Animal.info); //info是animal的静态属性

a1.jiao();

Animal.show();

11.class-总结class的基本用法和两个注意点

注意:在class{}区间内,只能写构造器、静态方法和静态属性、实例方法。(实例属性在构造器中),不能写变量声明什么的..。

注意2:class关键字内部其实还是原来的配方,只是语法糖。

12.12消失掉了..

13.class-使用extends实现子类继承父类

14. class-子类访问父类上的实例方法

15. class-constructor构造器中super函数的使用说明

super是一个 函数,而且它是父类的构造器,子类中的super,其实就是父类中constructor的引用。

constructor(xx,yy)内要写super(xx),而且super要写在新定义的属性this.yy=yy的前面。

16.class-为子类挂载独有的实例属性和实例方法

‘this’ is not allowed before super()

所以this只能放到super之后使用

17.使用class关键字创建组件

//如果要使用class定义组件,必须让自己的组件,继承自React.Component

class 组建名称 extends React.Component{

//在组建内部,必须有render实例函数

render(){

//render函数中,必须返回合法的JSX虚拟DOM

return <div>这时class创建的组件</div>

}

}

18.为class创建的组件传递props参数并直接使用this.props来访问

index.js 注意看,这段代码中注释写的很好。

// import React,{Component} from 'react'

import React from 'react'

import ReactDOM from 'react-dom'

/*

class Movie extends Component{

也可以这样继承

}

*/

class Movie extends React.Component{

//必须要有render实例函数

render(){

//必须要有return

//return null

//  注意:在class组建内部,this表示当前组件的实例对象

//在class关键字创建的组件中,如果想使用外界传递过来的props参数,不需接收,直接通过this.props.xxx来访问

return (<div>Hello {this.props.name} -- {this.props.age} -- {this.props.gender}</div>)

}

}

const user = {

name:'huhao',

age:23,

gender:'男'

}

ReactDOM.render(

// 这里的Movie标签,其实就是Movie类的一个实例对象

<div>

<Movie {...user}></Movie>

<hr/>

<Movie></Movie>

</div>

,document.getElementById('app'));

19.介绍class创建的组件中this.state

注意:props属性是只读的,不能在render函数中给它赋值

注意2:使用class关键字创建的组件,有自己的私有数据和生命周期函数,但是使用function创建的组件只有props,没有自己的私有数据和生命周期函数。

20.介绍有状态组件和无状态组件的区别:

1.用构造函数创建出来的组件:叫做无状态组件[无状态组建今后用的不多]

2.用class关键字创建出来的组件:叫做有状态组件[今后用的最多]

本质区别是:有无state属性和生命周期函数

3.什么情况下用什么:

·如果一个组件需要有自己的私有数据,则推荐使用 class创建的有状态的组件

·如果一个组件不需要有私有的数据,则推荐使用:无状态组件。

·React官方说:无状态组建,由于没有自己的state和生命周期函数,所以运行效率会比有状态组件高。

4.组件中的props和state/data(vue)之间的区别:

1)props中的数据都是外界传送过来的。

2)state/data中的数据,都是组件私有的;(通过Ajax获取回来的数据,一般都是私有数据)。

3)props中的数据都是只读的;不能重新赋值。

4)state/data中的数据都是可读可写的。

21评论列表案例—创建CmtList组件并渲染基本页面

import React, { Component } from 'react';

import ReactDOM from 'react-dom'

//使用 class关键字,定义父组件

class CmtList extends Component {

constructor() {

super()

this.state = {

CommentList: [//评论列表数据

{ id: 1, user: '张三', content: '哈哈 沙发' },

{ id: 2, user: '李四', content: '哈哈 板凳' },

{ id: 3, user: '王五', content: '哈哈 凉席' },

{ id: 4, user: '赵六', content: '哈哈 板凳' },

{ id: 5, user: '田七', content: '哈哈 楼下山炮' },

]

}

}

render() {

return (

<div>

<h1>这是评论列表组件</h1>

{this.state.CommentList.map(item =>

<div key={item.id}>

<h1>评论人:{item.user}</h1>

<p>评论内容:{item.content}</p>

</div>)}

</div>

)

}

}

ReactDOM.render(<CmtList ></CmtList>, document.getElementById('app'));

22.将评论Item项抽离为单独的CmtItem组件

import React, { Component } from 'react';

import ReactDOM from 'react-dom'

//使用 function 构造函数,定义普通的无状态组件

function CmtItem(props) {

return (

<div>

{

<div key={props.id}>

<h1>评论人:{props.user}</h1>

<p>评论内容:{props.content}</p>

</div>

}

</div>

)

}

//使用 class关键字,定义父组件

class CmtList extends Component {

constructor() {

super()

this.state = {

CommentList: [//评论列表数据

{ id: 1, user: '张三', content: '哈哈 沙发' },

{ id: 2, user: '李四', content: '哈哈 板凳' },

{ id: 3, user: '王五', content: '哈哈 凉席' },

{ id: 4, user: '赵六', content: '哈哈 板凳' },

{ id: 5, user: '田七', content: '哈哈 楼下山炮' },

]

}

}

render() {

return (

<div>

<h1>这是评论列表组件</h1>

{

this.state.CommentList.map(

item => <CmtItem key={item.id} {...item}></CmtItem>

)

}

</div>

)

}

}

ReactDOM.render(<CmtList ></CmtList>, document.getElementById('app'));

23.将评论列表组件和评论项组件抽离为单独的组件

24.演示艾特符号替代相对路径的好处

因为之前的@符号定义了到src/目录下的绝对路径,所以从index.js中抽离组件的话不用再改变路径,非常方便。

React 第二天的更多相关文章

  1. React第二篇:组件的生命周期

    前言:因为生命周期是必须要掌握的,所以React的第二篇咱就写这. (版本:16.3.2) React的生命周期大致分为四个状态:分别是Mouting.Updating.Unmounting.Erro ...

  2. react第二单元(react的组件-state-props-setState)

    第二单元(react的组件-state-props-setState) 课程目标 理解组件和组件的创建.以及能够根据实际场景去划分合理的组件. 理解并且能够灵活的应用组件中的state.props. ...

  3. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  4. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  5. React第一篇: 搭建React + nodejs + express框架

    前提: 需要安装Node.js (>6)版本 1.cmd进到本地某个目录, 逐行输入以下指令(以下括号为注释) npm install -g create-react-app   (全局安装cr ...

  6. 2、手把手教React Native实战之从React到RN

    ###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...

  7. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  8. react 关于this.setState使用时,第一次无法获取数据,第二次获取的数据是第一次触发的疑问

    我使用的是antd组件, compareClickFn(orderCodes, fileNames) { printLog("orderCodes----------"+ orde ...

  9. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

随机推荐

  1. 话说普通的TPlink ip地址是192.168.1.2 在LAN里有台电脑共享打印机 ip 是192.168.0.2 计算机名为j02 然后我把这台电脑加到DMZ里,让根路由器同一网段的可以访问 但添加打印机的时候 提示 计算机名重复 后来在需要添加打印机电脑的hosts文件里加了 192.168.1.2 j02 式了一样不行 话说,这个打印机该怎么添加

    开启端口映射,从外网访问内网的文件共享: 已经在路由器里开了远端WEB管理设了端口,另外端口映射局域网里的一台电脑,比如WEB端口设的是8080,映射192.168.1.100到4877端口,现在我想 ...

  2. Unity 控制public/private 是否暴露给Inspector面板

    默认情况下Public是暴露给Unity,protect/private是不暴露给Unity的,但有时候想让外部引用,又不想暴露给Unity,怎么办? 对Unity隐藏,使用[HideInInspec ...

  3. 移动端和pc端的判断,不同端做不同的处理

    1.通过js判段是pc端还是移动端 function browserRedirect() { var type = ""; var sUserAgent = navigator.u ...

  4. 根据 thread id 停止一个线程

    出自 https://github.com/Bogdanp/dramatiq/blob/master/dramatiq/middleware/threading.py#L62 thread_id = ...

  5. docker images镜像无法删除

    删除所有容器: docker rm $(docker ps -aq) 删除镜像: docker rmi $(docker images -q) 如果有镜像无法删除,有可能更改了名字,用docker r ...

  6. BZOJ 4182 Shopping (点分治+树上多重背包)

    题目大意:给你一颗树,你有$m$元钱,每个节点都有一种物品,价值为$w$,代价为$c$,有$d$个,如果在$u$和$v$两个城市都购买了至少一个物品,那么$u,v$路径上每个节点也都必须买至少一个物品 ...

  7. [luogu2513 HAOI2009] 逆序对数列 (计数dp)

    题目描述 对于一个数列{ai},如果有iaj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数列到底有多少个? ...

  8. vue文件目录结构

    使用node和npm环境,很容易搭建起一个vue环境.搭建完成以后,项目基本结构,如下图所示: 1.build: bulid文件夹保存的是一些webpack的初始化配置 2.config: confi ...

  9. 小学生绞尽脑汁也学不会的python(初识面对对象)

    小学生绞尽脑汁也学不会的python(初识面对对象) 一. 面向对象思想 1. 面向过程. 重点在"过程". 按照实物的发展流程. 先干嘛,后干嘛, 最后干嘛.... 优点: 简单 ...

  10. ASP.NET-AuthorizeAttribute做身份验证操作

    代码顺序为:OnAuthorization-->AuthorizeCore-->HandleUnauthorizedRequest 如果AuthorizeCore返回false时,才会走H ...