• 76305

    文章

  • 706

    评论

  • 18

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

React知识点整理

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

元素的渲染

  • 什么是 React 元素

    • 元素是构成 React 应用的最小单位,用 ReactDOM.reader() 方法渲染。 元素是普通的 js 对象,是构成组件的一个部分。
  • 创建 React 元素

    • 使用 JSX 语法:const element = <h1>Hello, world</h1>;,JSX 语法是用 React.createElement() 来构建 React 元素的。

    • React.createElement(),接受三个参数:1. 可以是一个标签名(如div、span、或 React 组件);2. 为传入的属性;3. 组件的子组件。

    • React.cloneElement(),与 React.createElement() 相似,不同的是它传入的第一个参数是一个 React 元素,而不是标签名或组件;新添加的属性会并入原有属性,同属性名新的会替换旧的,传入到返回的新元素中。

  • 渲染 React 元素到 DOM

    • 渲染粗略过程:React元素描述的是 虚拟DOM的结构,React会根据虚拟DOM渲染出页面的真实DOM。
    • 渲染详细过程:1. 先调用 React.createElement() 编译成上面的 js 对象(也就是虚拟DOM节点);2. 然后再调用 ReactDOMComponent( vdom).mountComponent() 将虚拟DOM变成真实的DOM;3. 最后用 appendChild( domNode ) 插入DOM树,显示出来。
  • 更新已渲染的元素

    • React 元素是不可变的,我们一旦创建了一个元素,就不能再修改其子元素或任何属性,因此我们更新 UI 的唯一方法就是创建一个新的元素,并将其传入 ReactDOM.render() 方法中。
  • 只更新必须要更新的部分

JSX 简介

JSX 是 一种 JavaScript 的语法扩展,运用于 React 架构中,它是用来声明 React 当中的元素,React 使用 JSX 来描述用户界面。

JSX就是 Javascript 和 XML 结合的一种格式,React 发明了 JSX,利用HTML语法来创建虚拟DOM。当遇到 <,JSX就当HTML解析,遇到 { 就当 JavaScript 解析。

**注意:**大括号里是 JavaScript,不要加引号,加引号就会被当成字符串。

组件 & Props

组件可以将UI切分成一些独立的、可复用的部件,这样就只需专注于构建每一个单独的部件了。

  • 定义组件

    • 函数定义组件(JavaScript函数)
    • ES6 class 定义组件
  • 自定义组件(组件名称必须以大写字母开头)

  • 组件渲染(组件名必须大写字母开头)

    • 将组件作为React元素,标签的属性作为props键值。
  • 组合组件(返回值只能有一个根元素)

    • 组合组件它可以在输出中引用其他组件,在 React 应用中,按钮、表单、对话框以及整个屏幕的内容都可被表示为组件。
  • 提取组件

    • 可以将组件切分为更小的组件。
  • Props 的只读性

    • 无论是使用函数或是类来声明一个组件,它都不能修改它自己的props值。

state & 生命周期

修改 state 时使用 setState()。

  • 将函数转换为类

    • 创建扩展名为 React.Component 的ES6类
    • 创建 render() 空方法
    • 将函数体移动到 render() 方法中
    • render() 方法中使用 this.props 替换 props
  • 为一个类添加局部状态

    • render() 方法中使用 this.state.date 替代 this.props.date
    • 添加一个类构造函数来初始化状态 this.state
    • <Clock /> 元素移除 date 属性
  • 将生命周期方法添加到类中

    • <Clock /> 被传递给 ReactDOM.render() 时,React 调用 Clock 组件的构造函数;
    • React 然后调用 Clock 组件的 render() 方法;
    • Clock 的输出插入到 DOM 中时,React 调用 componentDidMount() 生命周期钩子;
    • 浏览器每秒钟调用 tick() 方法;
    • 一旦 Clock 组件被从DOM中移除,React会调用 componentWillUnmount() 这个钩子函数,定时器也就会被清除。
  • 正确地使用状态 关于 setState() :

    • 不能直接更新状态,应当使用 setState(); -更新状态可能是异步的,构造函数是唯一能够初始化 this.state 的地方;
    • 状态更新合并(浅合并),当更新一个状态时,其他的状态保持不变。
  • 数据单向流动

    • 从父节点传递到子节点,因为组件是简单并且易于把握的,我们只需要从父节点获取props渲染即可,如果顶层组件的某个props改变了,那么 React 会递归的向下遍历整棵组件树,重新渲染所有使用这个属性的组件。

事件处理

  • 语法差异

    • React 事件绑定属性的命名采用驼峰式写法,而不是小写。
    • 如果采用 JSX 的语法我们需要传入一个函数作为事件处理函数,而不是一个字符串。
    • return false; 不会阻止组件的默认行为,需要调用 e.preventDefault();
  • 尽量不要使用 addEventListener

  • 绑定事件处理函数的 this

    -通过 bind 方法,原地绑定事件处理函数的 this 指向(特点:书写简单,但是每次渲染都会执行生成一个新函数) -通过一个箭头函数将真实的事件处理函数包装(特点:能清晰描述事件处理函数接收的参数列表) -在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定(特点:解决了前两种方法的额外开销和重新渲染的问题,但是书写有点复杂) -使用类成员字段定义语法(特点:解决了上述三种问题,唯一的就是它还没被正式纳入 ES5 规范中)

表单(Forms)

HTML 表单元素与 React 中的其他DOM元素有所不同,因为表单元素生来就保留了一些内部状态。

  • 用value实现受控组件

    • < input type=”text”/>
    • <textarea>,通过它的子节点定义了它的文本值
    • <select>,创建下拉列表
  • file input 标签

  • 处理多个输入元素

  • 受控 input 组件的 null 值

    • 在受控组件上指定值 prop 可防止用户更改输入,如果我们指定了一个 value,但是输入的值却仍然是可以编辑的,那么可能会以外的把 value 设置为 undefined 或者是 null。

CSS 和 SASS

CSS

  • 内联样式:使用内联样式属性设置元素样式,值必须是JavaScript对象。

    • camelCased属性名称:由于内联CSS是用JavaScript对象background-color 编写的,因此必须使用camel case语法编写具有两个名称的属性。
    • JavaScript 对象:使用样式信息创建对象,并在style属性中引用它。
  • CSS 样式表

    • 在单独的文件中编写CSS样式,只需使用 .css 文件扩展名保存 文件,然后将其导入应用程序。
  • CSS 模块

    • 向应用程序添加样式的另一种方法是使用CSS模块,它便于放置在单独文件中的组件。

Sass

  • Sass是一款CSS预处理器,它的文件在服务器上执行,并将 CSS 发送到浏览器。

条件渲染

React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。

  • if 语句,在React中使用if语句条件渲染是最简单的,if... else 是最基本的条件渲染方式,用 if 从渲染方法中返回null提前退出函数 。
  • 三元操作符,两种模式(edit,view),它使条件渲染更加的简洁,使得代码可以采用内联(inline)的方式表达出来。 逻辑 && 操作符,不返回元素就返回null时使用。
  • switch... case 语句,比较冗长,可以通过立即调用函数内联使用。
  • 枚举(enums),使用多种条件渲染最好的方式是枚举,在javascript中,对象的键值对可以用作枚举。
  • 多层条件渲染,也被叫做嵌套条件渲染。
  • 使用高阶组件(HOCs), 使用高阶组件而屏蔽条件渲染,它的一种使用方式就是改变组件的外观,组件能关注主要的逻辑目的 。

列表 & Keys

Keys 可以在DOM中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。

  • 列表(Lists)

    • 多组件渲染
    • 基本列表组件
  • 键(Keys)- 帮助 React 标识哪个项被修改、添加或者移除了

    • 使用 keys 提取组件,keys 只在数组的上下文中存在意义。
    • 在数组中使用的 keys 在同辈元素中必须是唯一的。
    • keys 的内部性,键是React的一个内部映射,但其不会传递给组件的内部。

React 理念

React 最初的目的是使用 JavaScript 创建大型的,快速响应的网络应用。

React 的众多优点之一是它让我们在编写代码的时候同时也在思考我们的应用。

我们需要了解的五大核心概念有:

  • 组件
  • JSX
  • Props & State
  • 组件 API
  • 组件类型

使用 PropTypes 检查类型

React 组件参数类型的验证。

高阶组件

高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。也就是说,高阶组件是参数为组件,返回值为新组件的函数。


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客