一文应对react与vue的对比

1.react 相对于 vue 的优势和对比

说一下我个人的理解，我觉得react和vue，不能说谁更好，两个框架都挺好的！但是react更加高级！

react 相对于 vue 的优势：

1.react 可以在 js 中直接把一些请求返回的，构造好的数据直接传递给组件，都是放在一起的，逻辑清晰更加简便，相对来说就是少了一些步骤，不需要通过一个html中间层去渲染这些数据！

vue 还要绑定到 data 中再通过 props 传递过去，当然还有一种思路就是使用 ref 去获取对象然后直接修改子组件的 data 值

2.react 生态更加完整，很多插件

3.react 可以实现一些高级功能：render props 这个技术可以实现动态渲染，vue 则比较难做到

4.还有一些性能优化：useCallback，useMemo这种钩子

vue的优势：上手比较容易，高度封装，有很多语法糖之类的，开发会相对更加快速！

2.render props

Render Props 是一种在 React 中共享代码逻辑的技术。它通过将一个函数**（函数里面有页面的模版内容）**作为组件的 prop 传递，并在组件内部调用该函数来共享逻辑。这个函数接收组件的内部状态或其他数据作为参数，并返回一个 React 元素或组件，以实现动态渲染。——> 相当于子到父的通信，只不过是直接通过子的数据构造并返回页面了（父组件直接使用子组件的数据生成模版的页面，不用再去用自定义事件触发），而不是接收子的数据再去构造页面

使用 Render Props，可以将通用的逻辑封装在一个函数中，并将该函数作为 prop 传递给其他组件，使得这些组件能够共享这个逻辑并使用它来渲染内容。这种模式使得组件之间的逻辑复用更加灵活。

以下是一个示例，演示了 Render Props 的使用：

jsx

import React from 'react';

// 定义一个使用 Render Props 的组件 ——> 子组件
class MouseTracker extends React.Component {
  // 组件内部状态
  state = { x: 0, y: 0 };

  // 更新鼠标位置的方法
  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {/* 将 Render Props 函数作为 prop 传递给模版，动态生成内容（相当于动态插槽） */}
        {/*
          即动态的、可被赋值操作的：下面这个结构
          <div>
              <p>Mouse position: {mouse.x}, {mouse.y}</p>
          </div>
        */}
        {this.props.render(this.state)} {/*相当于子到父的通信，只不过是直接通过子的数据构造并返回页面了，而不是接收子的数据再去构造页面*/}
      </div>
    );
  }
}

// 使用 MouseTracker 组件，并传递 Render Props 函数 ——> 父组件
function App() {
  return (
    <div>
      <h1>Mouse Tracker</h1>
      <MouseTracker
        render={(mouse) => ( //这里直接用子传递的数据，构造页面
          <div>
            <p>Mouse position: {mouse.x}, {mouse.y}</p>
          </div>
        )}
      />
    </div>
  );
}

在上述示例中，我们定义了一个 MouseTracker 组件，它追踪鼠标的位置并将位置信息存储在组件的内部状态中。通过将一个 Render Props 函数作为 render prop 传递给 MouseTracker 组件，我们可以在 Render Props 函数中使用鼠标位置信息，并返回需要渲染的内容。

Render Props 提供了一种灵活的方式来实现组件之间的逻辑复用，使得代码更加可维护和可扩展。它在许多 React 库和组件中被广泛使用，如路由库 react-router 的 <Route> 组件就使用了 Render Props 模式来渲染匹配的路由。

如何向组件内部动态传入带内容的结构(标签)?

Vue中:
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体传入结构
	使用render props: 通过组件标签属性传入结构，而且可以携带数据，一般用render函数属性
	这两个属性是每个组件都有的，他们的功能就类似于插槽

children props ——> 简单的传递内容的插槽

//这时我们在 C 组件，A 组件为子组件（给里面传入 B 组件）
<A>
  <B>xxxx</B>
</A>
A 组件：{this.props.children} //在 A 组件中取到 B 组件
B 组件：什么也干不了

问题: 如果B组件需要A组件内的数据, ==> 做不到

render props ——> 可以根据参数构建内容的插槽

//这时我们在 C 组件，A 组件为子组件（给里面传入 B 组件）
<A render={(data) => <B data={data}></B>}></A>
A组件: {this.props.render(内部state数据)} //调用 C 组件给传入的方法，给 B 组件传入自身的state，构建并取到 B 组件
B组件: 读取A组件传入的数据显示 {this.props.data} //使用 A 组件的数据进行一些操作

2.生态方面：react 构建样式化组件相对于普通的 css 的优势？

React 构建样式化组件相对于普通的 CSS 有几个优势：

组件化思维： React 的样式化组件鼓励开发者以组件化的方式构建用户界面。每个组件封装了自己的样式和行为，使代码更加模块化、可复用和易于维护。这种组件化思维使得开发者能够更好地管理和理解项目中的样式。
局部作用域： 在 React 中，样式通常是与组件绑定的，可以将样式限制在组件的作用域内。这样一来，不同组件间的样式不会互相干扰，避免了全局 CSS 的潜在冲突问题。这种局部作用域使得样式的管理更加可靠和可控。
组件状态响应： React 的样式可以与组件的状态和属性关联起来。通过使用状态或属性来控制样式，可以根据不同的应用场景或用户交互自动调整组件的样式，使得界面更加动态和交互式。
动态样式： 基于 React 的样式化组件可以使用 JavaScript 的逻辑来动态地生成样式，从而可以实现更加复杂的样式逻辑。这种灵活性可以让你根据条件或用户输入来动态调整组件的外观。
样式重用： React 的样式化组件鼓励样式的重用。你可以通过将样式作为 props 或类名传递给组件来实现不同样式的复用，这在构建类似但样式稍有差异的组件时特别有用。
CSS-in-JS： React 生态系统中还涌现了一些 CSS-in-JS 库（例如 styled-components、Emotion 等），它们允许你在 JavaScript 文件中直接编写样式。这样做的优势是可以将样式与组件紧密结合，提供更加直观和灵活的样式管理方式。

然而，值得指出的是，React 构建样式化组件并不是完全取代普通 CSS 的选择。在某些情况下，使用传统的 CSS 仍然是合理和有效的，特别是对于简单的静态页面或全局样式。选择合适的样式化方式还要考虑具体项目的需求、规模和团队的熟悉程度。

一文应对react与vue的对比 ​

1.react 相对于 vue 的优势和对比 ​

2.render props ​

2.生态方面：react 构建样式化组件相对于普通的 css 的优势？ ​

一文应对react与vue的对比

1.react 相对于 vue 的优势和对比

2.render props

2.生态方面：react 构建样式化组件相对于普通的 css 的优势？