回顾Javascript React基础


Posted in Javascript onJune 15, 2019

前言

React核心的单向数据流、一切皆数据的state、不会改变的props,以及状态提升等等经常使用便不多总结,需要的看官方文档。

JSX

JSX 本质只是为 React.createElement(component, props, ...children)提供的语法糖!

  • 1.React DOM 在渲染之前都被转换成了字符串,它天生自带防止 XSS 攻击的属性。
  • 2.Babel 转译器会把 JSX 转换成一个名为 React.createElement()的方法调用。在线babel编译

以下两段代码等价(许多react的界面设计器通过这个原理,达到元数据转化React元素,实现界面化编程!)
嵌套就是多个create方法的嵌套。

function hello() {
return <div className="red">Hello,<span>world!</span></div>;
}
"use strict";
function hello() {
return React.createElement(
"div",
{ className: "red" },
"Hello,",
React.createElement(
"span",
null,
"world!"
)
);
}

  • 3.JSX中的属性是可以任何 {} 包裹的 JavaScript 表达式作为一个属性值,不能使用if和for。

需要循环和条件渲染可以使用map、三目,或者使用if/for在jsx代码之外!

//错误的!
class A extends React.Component {
render() {
return <div>{if(){}else{}}</div>;//原来还蒙蔽的不知道为什么错了0.0
}
}

React.Component (组件)

创建组件的四种方式:

React.Component 方式

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

ES5

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
//或者使用react
var Greeting = React.create({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});

函数式

const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}

PureComponet

大多数情况下, 我们使用PureComponent能够简化我们的代码,并且提高性能,但是PureComponent的自动为我们添加的shouldComponentUpate函数,只是对props和state进行浅比较(shadow comparison),当props或者state本身是嵌套对象或数组等时,浅比较并不能得到预期的结果,这会导致实际的props和state发生了变化,但组件却没有更新的问题。当然还是有解决的方法的,所以建议还是少用。

事件处理

事件绑定的四种方法:推荐使用第一第二种。

class Toggle extends React.Component {
constructor(props) {
{...}
//方法一必须在这里绑定
this.handleClick1 = this.handleClick.bind(this);
}
handleClick1() {
this...
}
//方法二使用【属性初始化器语法】【需要开启babel stage-0以上】
handleClick2=()=> {
this...
}
render() {
return (
<div>
<button onClick={this.handleClick1}></button>
<button onClick={this.handleClick2}></button>
//方法三在使用时绑定
<button onClick={this.handleClick1.bind(this)}></button>
//方法四在回调函数中使用 箭头函数
/**
渲染的时候都会创建一个不同的回调函数。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
**/
<button onClick={(e) => this.handleClick1(e)}></button>
</div>
);
}
}

组合 vs 继承

在React中不推荐使用继承,不推荐继承自定义Component。

//不推荐使用
class Parent extends React.Component {
render() {
return <div>...</div>;
}
}
class A extends Parent {
render() {
return <div>...</div>;
}
}
//推荐使用
class A extends React.Component {
render() {
return <Parent>...</Parent>;
}
}

不使用 ES6

  • Component || create
  • defaultProps || getDefaultProps
  • constructor state || getInitialState
  • this bind || 不需要
class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert(this.state.message);
}
render() {
return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
}
}
Greeting.defaultProps = {
name: 'Mary'
};
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
getDefaultProps: function() {
return {
name: 'Mary'
};
},
handleClick: function() {
alert(this.state.message);
},
render: function() {
//组件中的方法会自动绑定至实例,不需要像上面那样加 .bind(this)
return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
}
});

Refs

1.如果可以通过声明式实现,则尽量避免使用 refs。

2.不能在函数式组件上使用 ref 属性,因为它们没有实例

3.旧版 API:String 类型的 Refs,存在问题,可能会在未来移除,不推荐使用。

4.对父组件暴露refs,在父元素拿子元素

function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}

class Parent extends React.Component {
//this.inputElement 就是CustomTextInput中的input
render() {
return (
<CustomTextInput
inputRef={el => this.inputElement = el}
/>
);
}
}

ReactDOM

获取一个DOM除了refs还有更加简单粗暴的方法findDOMNode。

findDOMNode 是用于操作底层DOM节点的备用方案。使用它的优先级比refs更低!!

findDOMNode 只对挂载过的组件有效。

findDOMNode 不能用于函数式的组件中。

import ReactDOM from 'react-dom';
ReactDOM.render(
element,
container,
[callback]//不为人知的第三个参数!!
)
ReactDOM.unmountComponentAtNode(container)
ReactDOM.findDOMNode(component)

不常用的新发现

  • 空的 JSX 标签Fragments <></>或者<React.Fragment></React.Fragment>
  • 与运算符 && true && expression 总是返回 expression,而 false && expression 总是返回 false。
  • 阻止组件渲染常用null组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如,componentWillUpdate 和 componentDidUpdate 依然可以被调用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
简单实现JS计算器功能
Dec 21 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
Js面试算法详解
Apr 08 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 #Javascript
微信小程序版本自动更新的方法
Jun 14 #Javascript
vue+express+jwt持久化登录的方法
Jun 14 #Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 #Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 #Javascript
ES6顶层对象、global对象实例分析
Jun 14 #Javascript
ES6数组与对象的解构赋值详解
Jun 14 #Javascript
You might like
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
php array的学习笔记
2012/05/10 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php单例模式实现方法分析
2015/03/14 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
10个经典的网页鼠标特效代码
2018/01/09 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
毕业自我鉴定书
2014/03/24 职场文书
新农村建设汇报材料
2014/08/15 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
辩护词范文大全
2015/05/21 职场文书