React学习记录

content

1、React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本)攻击。

2、JSX 表示对象 Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。react元素

3、使用String字符串化

<div> My JavaScript variable is {String(myVariable)}. </div>

4、“纯函数”,因为该函数不会尝试更改入参,且多次调用下相同的入参始终返回相同的结果。

5、React 非常灵活,但它也有一个严格的规则:

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

问题:需要严格保护props的原因是什么?

6、尽管 this.props 和 this.state 是 React 本身设置的,且都拥有特殊的含义,但是其实你可以向 class 中随意添加不参与数据流(比如计时器 ID)的额外字段。

7、State 的更新可能是异步的。出于性能考虑,React 可能会把多个 setState() 调用合并成一个调用。 因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来更新下一个状态。

例如,此代码可能会无法更新计数器:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

要解决这个问题,可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数:

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

8、数据是向下流动的

9、事件处理

  • React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
<button onClick={activateLasers}>
  Activate Lasers
</button>

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault;

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

10、JSX 回调函数中的 this,在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined。

// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);

// or 在模板中
<button onClick={this.handleClick.bind(this)}>
    Click me
</button>

11、阻止组件渲染 可以让 render 方法直接返回 null,而不进行任何渲染。在组件的 render 方法中返回 null 并不会影响组件的生命周期。依旧会按照生命周期执行相应的函数方法。

12、key值:

  • 帮助 React 识别哪些元素改变了,比如被添加或删除,不建议使用索引来用作 key 值,如果列表项目的顺序可能会变化。正确的key 应该在数组的上下文中被指定。一个好的经验法则是:在 map() 方法中的元素需要设置 key 属性。
  • 数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而,它们不需要是全局唯一的。当我们生成两个不同的数组时,我们可以使用相同的 key 值。
  • key 会传递信息给 React ,但不会传递给你的组件。如果你的组件中需要使用 key 属性的值,请用其他属性名显式传递这个值

13、状态提升 通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。

14、React ref 引用

15、错误边界 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界。

错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

注意 错误边界无法捕获以下场景中产生的错误:

  • 事件处理(了解更多)
  • 异步代码(例如 setTimeout 或 requestAnimationFrame 回调函数)
  • 服务端渲染
  • 它自身抛出来的错误(并非它的子组件)
  • 如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。当抛出错误后,请使用 static getDerivedStateFromError() 渲染备用 UI ,使用 componentDidCatch() 打印错误信息。

例子Demo

思考问题:

1、需要严格保护props的原因是什么?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java8 CompletableFuture 编程

     所谓异步调用其实就是实现一个无需等待被调用函数的返回值而让操作继续运行的方法。在 Java 语言中,简单的讲就是另启一个线程来完成调用中的部分计算,使调用继续...

    JMCui
  • [译] 避免那些可恶的cannot read property of undefined 错误

    Uncaught TypeError: Cannot read property 'foo' of undefined. 是一个我们在 JavaScript 开...

    ConardLi
  • 微信小程序知识云开发

    小程序界面设计、交互、功能与他人的手机应用软件或在先发布的小程序构成实质性相似,构成小程序抄袭

    达达前端
  • 前端语言基础【第二篇:JavaScript】

    在js里面需要获取到input里面的值,如果把script标签放到head 里面会出现问题。

    BWH_Steven
  • 「React Hook」160行代码实现动态炫酷的可视化图表 - 排行榜

    这是一个国外大佬在其公司峰会的代码竞赛中写的一个库:react-dynamic-charts,用于根据动态数据创建动态图表可视化。

    前端劝退师
  • 【Rust日报】 2019-08-12 - 哪些软件应用值得用Rust重写?

    Rust安全、高性能等优点吸引到很多优秀的开发者和公司将原有项目的部分或全部用它重写,下面是知乎上关于该问题的回答,如果你有重写的经验和想法,欢迎分享。

    MikeLoveRust
  • require时,exports和module.exports的区别你真的懂吗?

    提到 exports 和 module.exports 我们不得不提到 require 关键字。大家哦读知道 Node.js 遵循 CommonJS 规范,使用...

    coder_koala
  • 10分钟,用TensorFlow.js库,训练一个没有感情的“剪刀石头布”识别器

    “剪刀石头布”是我们小时候经常玩的游戏,日常生活中做一些纠结的决策,有时候也常常使用这种规则得出最后的选择,我们人眼能很轻松地认知这些手势,“石头”呈握拳状,“...

    大数据文摘
  • 56 道高频 JavaScript 与 ES6+ 的面试题及答案

    用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为 9 - 20

    夜尽天明
  • 【Rust日报】 2019-08-16 - Rust如何走进Facebook

    Chaos: 今天刚看到Facebook内部meetup流出的Slides,原文标题很有意思:Bringing Rust Home to Meet the Pa...

    MikeLoveRust

扫码关注云+社区

领取腾讯云代金券