回顾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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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 XML数据解析代码
2010/05/26 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP中的替代语法介绍
2015/01/09 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php中namespace及use用法分析
2016/12/06 PHP
PDO::quote讲解
2019/01/29 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
战友聚会邀请函
2014/01/18 职场文书
料理师求职信
2014/01/30 职场文书
公司门卫岗位职责
2014/03/15 职场文书
村庄环境整治方案
2014/05/15 职场文书
高中家长意见怎么写
2015/06/03 职场文书