回顾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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
基于vue.js实现的分页
Mar 13 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Jquery对数组的操作技巧整理
2014/03/25 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Windows下python3.6.4安装教程
2018/07/31 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
Java中实现多态的机制
2015/08/09 面试题
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
庆元旦演讲稿
2014/09/15 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
Spring 使用注解开发
2022/05/20 Java/Android