正文

react从入门到放弃之前奏：react简介(代码片段)

Never、C  Never、C  2022-11-15  746

关键词：

本系列将尽可能使用ES6（ES2015）语法。所以均在上节webpack的基础上做开发。

React是Facebook开发的一款JS库，因为基于Virtual DOM，所以响应速度快，以及支持跨平台。
（实际上，Virtual DOM在某些情况都会损耗一些性能在diff上，但相比其他MVVM框架比起来性能影响很少，同时大幅提升开发效率也是目前推荐的方式）

安装

安装React： npm i -S react react-dom

安装Babel：npm i babel-loader babel-preset-react babel-plugin-import -S

HelloWorld

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

JSX

JavaScript 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。

JSX支持嵌入表达式：花括号把任意的 JavaScript 表达式嵌入到 JSX 中
JSX是Javascript：比起 HTML, JSX 更接近于 JavaScript, React DOM 使用驼峰(camelCase)属性命名约定。(html为全小写)
JSX防注入攻击：在渲染之前, React DOM 会格式化(escapes) JSX中的所有值。防止 XSS(跨站脚本) 攻击。
JSX编译后为： React.createElement()。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
   className: 'greeting' ,
  'Hello, world!'
);

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = 
  type: 'h1',
  props: 
    className: 'greeting',
    children: 'Hello, world'
  
;

组件

React框架的一大特色就是它通过组件化的方式来构建和渲染前端页面。
定义组件有很多方式，最主流的为：函数和类(类允许我们在其中添加本地状态(state)和生命周期钩子。)

function Welcome(props) 
  return <h1>Hello, props.name</h1>;

class Welcome extends React.Component 
  render() 
    return <h1>Hello, this.props.name</h1>;

Props

属性是只读的：无论你用函数或类的方法来声明组件, 它都无法修改其自身 props。
属性是外部控制的：属性是由外部设置，组件内部是不确定属性从哪设置的。
稳定性：对于同样的输入,始终可以得到相同的结果。

State

state是内部控制的：state是私有的，并且由组件本身完全控制。
使用setState修改：
1. 内部调用render
2. 支持异步
3. 支持更新合并state

生命周期事件

React组件的生命周期事件很多，常用的有：

componentDidMount：在组件第一次初始化render方法后调用，此时组件（DOM及诶点）已创建完成。通常在此方法中ajax、使用第三方js框架。
shouldComponentUpdate：在组件接收到新的state或props后被调用。（第一次初始化和forceUpdate时不被调用。）默认返回true，返回false的时候则不调用render方法。
componentWillUnmount：在组件从DOM中移除的时候被调用。通常用来移除组件相关事件。

生命周期事件又分为3条流程：

组件初始化（Mounting）：getDefaultProps、getInitialState、componentWillMount、render、componentDidMount（getInitialState在ES6 class的构造函数中可直接对state初始化）
组件props更新（Updating）：componentWillReceiveProps(nextProps)、shouldComponentUpdate、componentWillUpdate、render componentDidUpdate
组件卸载（Unmounting）：componentWillUnmount

表单

受控组件

React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为“受控组件”。

class ShowInput extends Component 
    constructor(props) 
        super(props);
        this.state = 
            val: 'hello'
        
    

    onChange(e) 
        this.setState(
            val: e.target.value
        )
    

    render() 
        return (
            <div>
                <input type="text" onChange=e => this.onChange(e) />
                <div>this.state.val</div>
            </div>
        )

DivInput组件中的input元素就是受控组件。value 和 onChnage都会由React控制。

非受控组件

    render() 
        return (
            <div>
                <input type="text" ref=e => this.input = e />
                <button onClick=() => console.log(this.input.value)>Click</button>
            </div>
        );

挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。(stateless构造的组件是不会实例化，所以ref引用的为null)

ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：

组件被挂载后：回调函数被立即执行，回调函数的参数为该组件的具体实例。
组件被卸载或者原有的ref属性本身发生变化时：回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。

组件通信

组件之间通信的解决方案通常有2种：

状态提升：将state提升到互相通信组件的最近的一个父组件上
Redux：下节将介绍

react16.4开发简书项目从零基础入门到实战

第1章课程导学 1-1课程导学第2章React初探 2-1React简介 2-2React开发环境准备 2-3工程目录文件简介 2-4react中的组件 2-5React中最基础的JSX语法第3章React基础精讲 3-1使用React编写T... 查看详情

react从入门到精通总结(代码片段)

事件1.React事件处理采用的是小驼峰命名法，而不是小写2.React使用JSX语法时你需要传入一个函数作为事件处理函数//jsx<buttononClick=this.onFn>11111</button>js中的函数方法直接写一个字符串作为事件处理函数。//js<buttono... 查看详情

qt从入门到放弃_0x02：基本控件简介(代码片段)

一、控件简介我们所看到的图形化界面是由很多部分组成的，比如显示文本的文本框、退出程序的按钮等等。这些组成图形化界面的，被赋予了多种功能的组件，就是Qt的控件二、基本控件下面的代码演示的都是最基本的控件使... 查看详情

elasticsearcho从入门到放弃:简介,lucene,概念,安装(代码片段)

文章目录一、ElasticSeach简介1.介绍2.ES可以做什么2.1信息检索2.2企业内部系统搜索2.3数据分析引擎3.ES特点3.1海量数据处理3.2开箱即用3.3作用传统数据库的补充4.ES对比solr:二、Lucene全文检索库1.什么是全文检索1.1结构化数据与非结构... 查看详情

react入门之redux：react-redux基本使用(代码片段)

前言在上一篇文章中，我们简要地模拟和梳理了一下redux的使用流程，本篇文章则使用react-redux库来实现store管理数据的效果上文的图搬过来，加深印象本篇文章的案例选用这篇文章的项目，目前该项目展示的效果... 查看详情

react入门之redux：react-redux基本使用(代码片段)

react从入门到入土--组件三大属性(代码片段)

📢大家好😪，我是小丞同学，最近在学习React、小程序、阅读JS高程，以及整理Node的笔记，这是关于React的第二篇文章，也是我学习的第一个框架，内容如有错误，欢迎大家指正📢愿你生活... 查看详情

react从入门到入土--组件三大属性(代码片段)

react从入门到入土--基础知识以及jsx语法(代码片段)

📢大家好😪，我是小丞同学，最近在学习React、小程序、阅读JS高程，以及整理Node的笔记，这是关于React的第一篇文章，也是我学习的第一个框架，内容如有错误，欢迎大家指正📢愿你生活... 查看详情

react从入门到入土--基础知识以及jsx语法(代码片段)

volatile从入门到放弃

1.引言如果你对java的volatile有着疑虑请阅读本文,如果你想对volatile想有一个更深的了解,请阅读本文.本文主要讲的是volatile的写happen-before在volatile读之前所涉及相关的原理,以及在Hotspot中相关代码的实现. ... 查看详情

elasticsearcho从入门到放弃:beats(代码片段)

文章目录一、Beats：1.Beats:1.1FileBeat简介1.2FileBeat的工作原理3.下载及安装:4.使用fileBeat采集xxx日志到es4.1配置FIleBeat4.1.1input配置4.1.2output配置4.2启动FileBeat4.3采集到数据4.4解决多行的问题:5.FileBeat是如何工作的5.1input和harvesters5.1.1... 查看详情

elasticsearcho从入门到放弃:beats(代码片段)

单例模式（从放弃到入门）(代码片段)

单例模式（从放弃到入门）@(设计模式)类图简介单例模式，可以说是设计模式中最简单的模式之一了，因为它不是用来解耦合用的，而是为了让整个系统有且只有一个这样的对象。为什么要只有一个呢？... 查看详情

react入门之reacthooks基本使用(代码片段)

前言Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。如果使用脚手架创建项目，即npxcreate-react-app+项目名，生成的主组件App.js默认是函数组件。在之前的案例中，... 查看详情

react入门之reacthooks基本使用(代码片段)

react-router6：从入门到实战最佳指南

前言大家好，我是CoderBin。前段时间学了react-router5后才知道出了6，经典白学查看详情

从入门到放弃之io

浅说IO学到现在利用过的特殊符号不少组合起来很多都有让人眼前一亮的用法，在这里先聊聊I/O的一些相关知识。本文开始之前先介绍一下需要知道的一些小知识和需要注意的地方。在linux中也是有优先级的存在的和数学里的运... 查看详情