当前位置：首页 > article >正文

React初识

article 2024/9/24 0:34:40

概述

React 是用于构建用户界面的 JS 库。
React 是 MVC 中薄薄的一层 V，把数据变成 DOM 显示出来，它只关注表现层。
React 原生就是函数 + 虚拟 DOM

特点

单向数据流

兼容性更好：支持IE8

JSX语法：处理数据和 DOM 之间的关系，而不需要直接操作 DOM。jsx 是React.createElement 的语法糖。

组件化：分为函数式组件和类组件。

虚拟DOM：减少操作真实DOM，提升性能，便于和其他平台集成。

函数组件和类组件的异同

函数组件也叫无状态组件，是一个纯函数，它接收一个 props 对象，返回一个 react 元素。

类组件需要去继承 React.Component ，接收一个 props 对象并且创建 render 函数返回 react 元素。

类组件中的 state 数据处于自身本页面实例，不和别人共享，以防冲突，类似于 vue2data。

生命周期：函数组件不存在生命周期；类组件的生命周期钩子函数继承自React.Component;

状态管理：在React Hook出现之前，函数组件无状态；类组件有状态state（响应式数据）；

React调用方式：函数组件直接调用；类组件需要实例化，调用实例的render()方法；

获取渲染的数据：类组件的this指向会变化；函数组件没有this；

React中props是不可变的，但this指向是可变的；

函数组件调用：直接调用

// 你的代码
function SayHi() {
    return <p> Hello，React </p>
}
// React内部
const result = SayHi(props) // <p>Hello, React</p>

类组件调用：先`new`实例化，再调用`render`方法

// 你的代码
class SayHi extends React.Component(
    render() {
        return <p> Hello，React </p>
    }
}
// React内部
const instance = new SayHi(props) //  SayHi()
const result = instance.render() // <p> Hello, React </p>

React注意事项：

不要在 jsx 语法中使用 if - else,可以使用三目运算、或运算、与运算;
不要在 jsx 语法中使用 for 循环, 使用 map 循环;
添加状态必须在构造方法，添加构造方法必须执行 super();
组件必须导入 React;

【注】调用 super 后，才能使用 this: 因为 constructor 会覆盖父类的constructor，导致父类构造函数没执行，所以手动执行 super 继承;

示例

import React,{Fragment} from "react";
class App4 extends React.Component {
    constructor(props) {
        super(props)
        console.log('app3')
        this.state = {//类组件比函数组件多了一个响应数据 
            msg: 'helloworld',
            inputvalue:'黑鹰战机',
            list:['航空母舰','战斗巡洋舰2']
        }
    }
    inputChange=(e)=>{
        this.setState({
            inputvalue:e.target.value
        })
    }
    addList=(e)=>{
        this.setState({
            //类似于小程序风格 因为只有数据劫持才能进行直接赋值
            list:[...this.state.list,this.state.inputvalue]
        })
    }
    deleteItem=(index)=>{
        let newList = this.state.list
        newList.splice(index,1)
        this.setState({
            list:newList
        })
    }
    render() {
        return (
           <Fragment>
              <div>
                <div>
                    <input value={this.state.inputvalue}  onChange={this.inputChange}/>                 
                    <button onClick={this.addList}>增加战舰</button>
                    <ul>
                        {
                            this.state.list.map((item,index)=>(
                             (<li onClick = { this.deleteItem.bind(this,index) }
                                key = {index} > {item}
                              </li>)
                            ))
                        }  
                    </ul>
                </div>
              </div>
           </Fragment>
        )}}
export default App4

JSX

JSX 是一个 JavaScript 的语法扩展，JSX表示在JS代码中写HTML结构，是React声明式的表现。JSX 是一个牺牲可读性，拥有 vue 模板特征，增强视图可编程性和编程效率的工具，灵活是优点，但并非没有代价。

优点：

方便，两种代码可以在一起混写，不用考虑不同文件类型如何组织的问题
可以将逻辑和视图交织写在一起，遇到列表，嵌套结构等逻辑视图时，思维负担比模板更小

缺点：

两种不同体系的语言元素写在一起，会显著降低可读性
短时间内不可能成为规范

React和Vue的区别

React 的思路是 HTML in JavaScript 也可以说是 All in JavaScript，通过 JavaScript 来生成 HTML，所以设计了 JSX 语法，还有通过 JS 来操作 CSS，社区的styled-component、JSS等。
Vue 是把 HTML，CSS，JavaScript 组合到一起，用各自的处理方式，Vue 有单文件组件，可以把 HTML、CSS、JS 写到一个文件中，HTML 提供了模板引擎来处理。
React 的核心思想是声明式渲染和组件化、单向数据流，它既不属于 MVC 也不属于 MVVM 架构。Vue采用 MVVM 架构。
React主要是通过 setState() 方法来更新状态，状态更新之后，组件也会重新渲染。
Vue 会遍历 data 数据对象，使用 Object.definedProperty() 将每个属性都转换为 getter 和setter，每个 Vue 组件实例都有一个对应的 watcher 实例，在组件初次渲染的时候会记录组件用到了那些数据，当数据发生改变的时候，会触发 setter 方法，并通知所有依赖这个数据的watcher 实例调用 update 方法去触发组件的 compile 渲染方法，进行渲染数据。

查看全文

http://www.kler.cn/news/17210.html