React 与 React Native 区别

最新推荐文章于 2025-06-16 15:53:05 发布

柯南二号

最新推荐文章于 2025-06-16 15:53:05 发布

阅读量454

点赞数

CC 4.0 BY-SA版权

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/qq_41688840/article/details/134205497

本文比较了React与ReactNative在实现点击按钮改变姓名和年龄功能时的代码差异，涉及样式编写方式、UI组件使用和事件处理的不同。React采用CSS选择器，而ReactNative则直接声明样式对象；React的UI组件更灵活，ReactNative则有特定控件规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 与 React Native 区别

同样的实现一个点击按钮，更换姓名和年龄的值的功能。两部分代码不同

React代码

import React, { useState } from 'react'
import './Button.css'

export function UseStateWithoutFunc() {
    const [name, setName] = useState('何遇')
    const [age, setAge] = useState()

    function onChange() {
        setName('张三') // 修改name
        setAge(23) // 修改age
    }

    return (
        <>
            <div className={'nameButton'}>姓名: {name}</div>
            <div className={'ageButton'}>年龄: {age === undefined ? '未知' : age}</div>
            <button onClick={onChange}>click</button>
        </>
    )
}

Button.css样式

.nameButton {
    font-size: 30px;
}
.ageButton{
    font-size: 20px;
}

React Native代码

import React, {useState} from 'react';
import {Text, Button, View, StyleSheet} from 'react-native';

export function UseStateWithoutFunc() {
  const [name, setName] = useState('何遇');
  const [age, setAge] = useState();

  function onChange() {
    setName('张三'); // 修改name
    setAge(23); // 修改age
  }

  return (
    <View>
      <Text style={styles.nameButton}>姓名: {name}</Text>
      <Text style={styles.ageButton}>
        年龄: {age === undefined ? '未知' : age}
      </Text>
      <Button title="Press me" onPress={() => onChange()} />
    </View>
  );
}

const styles = StyleSheet.create({
  nameButton: {
    fontSize: 30,
  },
  ageButton: {
    fontSize: 20,
  },
});

export default UseStateWithoutFunc;

区别点：

样式编写：
- React 的样式编写是通过css样式选择器。可以通过对某个id、某个className来进行标记识别，然后在另一个css文件里编写对应的样式
- React Native的样式编写一般是通过在当前文件里通过在StyleSheet.create里声明对应的样式对象，然后在对应控件里的style选择相应的样式对象
UI控件
- React 的UI控件和 React Native的UI控件来源不同，比如要显示文字，在React Native里必须用Text控件包裹起来，但是在React里可以直接在div标签中写。以及React的button控件有onclick事件，但是React Native的button只有onPress事件。