react一篇搞定入门

1.React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据

2.在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

react 2013.5开源 （轻量级视图层库 、虚拟dom）

对与虚拟dom，简单说就是，在render时 return出来的那段jsx，是一个js对象，称之为虚拟dom，
它没有直接渲染到web页面上，react 通过diff算法对现象产生的虚拟dom和之前的比较，比较出最小的dom改变，然后去渲染web页面
vue 2015

react 使用

  • cdn 链接的方式
  • 自己搭建 webpack 的环境
  • 使用一些官方或第三方的脚手架

cdn 链接的方式

1
2
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  • react react核心内容
  • react-dom react用来渲染真实dom的一个库

自己搭建 webapck 环境

  1. npm init -y
    1. npm install –save-dev webpack webpack-cli webpack-dev-server
    2. npm install –save react react-dom
    3. npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
    4. 写 webpack 配置文件
    5. 写 babel 配置文件
    6. src 文件夹 放源代码
    7. public 文件夹 放静态资源文件

使用脚手架 create-react-app

  1. npm install -g create-react-app
    1. create-react-app

或者

  1. npx create-react-app

ReactDOM.render();

一个ract项目只会调用一次
两个参数，
1.要渲染在页面上的内容(react元素 | html | 虚拟dom)
2.要渲染在页面上的某个位置（挂载点）

jsx 语法

  • 单个根元素
  • 单标签一定要闭合
  • img 必须要加alt属性
  • 标签都是小写字母，组件首字母大写
  • class ->className
  • for ->htmlFor

  • jsx注: 使用js的注释{/* */}

    jsx 的插值表达式：使用单个花括号，来作为表达式

    只能是简单的单个表达式，不能是语句也不能是条件或循环语句
    如果需要使用条件，可采用三元运算符

实现v-html 需要使用 dangerouslySetInnerHTML 这个属性，dangerouslySetInnerHTML 这个属性需要接受一个对象的value 

1
2
3
4
5
6
7
8
9
let str = '<h1>hello react</h1>';
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: str }}></div>
,documnet.getElementById('app'))
// 最后显示的就是div包着h1标签

{{ __html: 插值html }}

{ '' } | {false} | {null} | {underfined}这种情况可以实现，v-if

react中没有指令系统

组件 & props

  • react 中没有全局组件的概念，你需要使用哪个组件，就必须引入进来使用

一 . 组件定义

  1. 函数式组件
  2. 类组建

二. 函数组件的定义

  1. 定义一个函数，然后return出来一段jsx语法
    ，这段jsx语法就是这个组件的模板内容
  2. PS ：函数名就是组件名，首字母大写
    1
    const Hello =() => { return <h1></h1>}

三. 类定义的组件

  1. 定义一个类，类名就是组件名（首字母大写）
  2. 这个类需要继承，React.Component 这个基础组件
  3. 类中必须要有render函数，render函数return出来一段jsx语法，这段jsx语法就是这个组件的模板内容
    1
    2
    3
    class World extends React.Component {
    render () { return <p></p>}}
    `

PS:组件更多注意事项

  1. 组件模板内容，如果需要换行去写，就是用（）包裹起来

  2. 没有用React，为什么要引入：

  3. jsxc是一个语法糖
  4. 由于转换后的代码中使用了React ,使用React就必须要引入

组件的props属性

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

1
2
3
function sum(a, b) {
return a + b;
}
  • 调用组件的时候，在标签上写的属性，属性名就是一个prop
    1. props是个集合，prop是个具体的某个一个
    1. Vue中使用props首先要在组件中定义props选项，而react不用

  1. 函数组件，所有prop会做为参数传递

    1
    const Hello = ({name,age}) => {}

  2. 类组件
    所有prop会在this.props身上

    1
    2
    class World extends React.Component {
    render () { return <p></p>}}

props默认值

例如有一个World组件，那么默认的props就是，World.defaultProps = {
name: ‘李四’
}

react 元素

一. 什么叫做react元素，最基本的一个单元，任何标签都可以 看成一个react元素

虚拟DOM元素 | JSX代码中的任意标签 | 通过React.createElement 创建出来的js对象
二. 如何区分React元素 与React组件
组件就是一系列React元素的组成

三. 什么是元素变量
定义一个变量，变量值是一个React元素
const div =

hello

state

数据绑定的两种方式
1.props
2.state 私有

一. 什么叫有状态组件， 什么叫无状态组件
组建有没有状态，主要看这个组件有没有state
一般类组件就可以称为有状态组件，函数组件叫做无状态组件

二. 组件要有变化，两种方式

  1. 组件接收到的props有了变化
  2. 组件自身的state有变化
    三. 组件的state或props有变化，组件就会更新，更新的效果其实就是类组件的render函数重新执行，函数组件重新调用了
    PS:
    1. 如果要让组件有state, 首先要确保这个组件是类组件。
    2. 要在 构造函数中定义 状态的初始值。
    3. 写了 构造函数的话，就必须在构造函数的第一行调用父类的构造函数 super()
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      class Clock extends React.Component {
        // 让这个组件有自身的状态数据（state），通过 构造函数
        constructor(props) {
          super(props); // 调用父类的构造函数
          // 通过 this.state 给组件赋初始的state值, 不能setState
          this.state = {
            date: new Date()
          }
        }
        }

React.Fragment组件，效果像vue中template

1
import React, {Frigment, Component} from 'react'

this 绑定的四种方法

父 -> 子 prop
子 -> 父

    1. 调用子组件的时候，传递一个自己的方法下去，这个方法里面有修改自己state的功能更
    1. 子组件通过 this.props.propName() {/是一个方法名/}

  • 一、事件处理函数需要主动修改 this 指向，

  1. 为什么不能使用 apply 与 call 呢。
    apply 与 call 会立即执行，而 bind 是返回一个新的函数

*2. 处理在 jsx 上面直接 bind 的方式，我们还有以下几种修改this指向的方式

    1. jsx bind （不推荐）
    1. 箭头函数 （不推荐）
    1. 统一都在 构造函数中 去做 this 绑定 (推荐)
    1. 使用 实验性的 public class fields 语法 (推荐) func = () => {}

      react 性能优化

虽然react的defer算法可以根据虚拟dom的改变只渲染改变了的元素，但是父组件变了，子组件就会重新render，

在性能优化时能不渲染就不渲染，那么就要使用PureComponent基础组件

遵循原则：

  1. 不使用bind绑定this，因为bind返回的是新的方法
  2. 不使用箭头函数函数

统一在constructor中绑定this
使用 实验性的 public class fields 语法 （就是方法这么定义 fn1 = () => {}）
!!! 不遵循该规则，机会破坏React.PureComponent的性能优化

1
2
<Son age={this.state.age} fn = {this.fn1.bind(this)}/>
<Son age={this.state.age} fn = {()=>{console.log(123) }}/>

React.PureCompoent 会在组件内容，比较数据是否有更新，如果有就render。如果没有就不会 render

例如在父组件state的某个属性值变了，而子组件并没有依赖这个属性，那么要让子组件，不再次render ，那么就让子组件 class Son extends React.PureComponent {}

Share
13 min. read