文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Javascript之React的示例分析

2024-04-02 19:55

关注

这篇文章主要介绍Javascript之React的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

前言

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

JSX

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

以下两段代码等价(许多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!"
)
);
}

需要循环和条件渲染可以使用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 <h2>Hello, {this.props.name}</h2>;
}
}

ES5

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

函数式

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

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 <h2 onClick={this.handleClick}>Hello, {this.props.name}</h2>;
}
}
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 <h2 onClick={this.handleClick}>Hello, {this.props.name}</h2>;
}
});

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)

不常用的新发现

以上是“Javascript之React的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯