之前讲了react转vue，这篇文章讲讲vue转react，都是干货，看了这一篇直接上手react，直接讲使用区别和使用

React Hooks 是 React 16.8 版本引入的一项功能，旨在让函数组件能够使用状态和其他 React 特性。Hooks 提供了一种无需编写类组件即可使用状态、生命周期等功能的方式。

Hooks 是一些可以让你在函数组件中“钩入” React 状态和生命周期特性的方法。通过使用 Hooks，你可以在不编写类组件的情况下使用这些功能。

jsx的使用

第一个要讲react的jsx写法，函数式编程，每个函数就类似一个组件

import React from 'react';
function App() {
return ( 
 <div> <h1>Hello, world!</h1>
    <p>Welcome to my React app.</p> 
 </div> 
    ); 
}
export default App;

useState维护状态以及修改状态

react通过 useState来维护状态，通过数组的第二个setCount来修改状态，名字不是固定，下面是使用方法，其实两个框架万变不离其宗，非常类似，reactHooks与vue3非常雷同。react类组件与vue2雷同。

import React, { useState } from 'react';
function Counter() { 
// 声明一个叫 "count" 的 state 变量，初始值为0
const [count, setCount] = useState(0); 
return ( 
<div> <p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}> 点击我 </button> 
</div> );
}

useEffect

useEffect 是其中一个非常重要的 Hook，它允许你在函数组件中执行副作用操作。本文将详细介绍 useEffect 的用法及其最佳实践。 useEffect 是一个 Hook，用于在函数组件中处理副作用操作。副作用操作包括数据获取、订阅、手动更改 DOM 等。类组件的componentDidMount``componentDidUpdate 和 componentWillUnmount 生命周期方法都可以通过 useEffect 来实现。与vue2，就是替代mounted、updata、destroyed 创建更新以及销毁的过程

基本用法

import React, { useEffect, useState } from 'react'; 

function Example() { 
const [count, setCount] = useState(0); 

useEffect(() => {
// 使用浏览器 API 更新页面标题 document.title = `你点击了 ${count} 次`; 
}, [count]); // 仅在 count 变化时执行 
return (
 <div> 
   <p>你点击了 {count} 次</p> 
   <button onClick={() => setCount(count + 1)}> 点击我 </button>
</div>
 ); 
}
在这个例子中，每当 `count` 变化时，`useEffect` 内的回调函数就会执行，并更新页面标题。

依赖数组

依赖数组决定了 useEffect 的执行时机：

无依赖数组：每次渲染都会执行。

useEffect(() => {
  console.log('组件渲染或更新');
});

空依赖数组：只在组件挂载和卸载时执行一次。

useEffect(() => {
  console.log('组件挂载');
  return () => {
    console.log('组件卸载');
  };
  }, []);

具有依赖项的数组：仅在依赖项变化时执行。

 useEffect(() => {
     console.log('count 变化');
      }, [count]);

清理副作用

在 useEffect 中返回一个函数，这个函数会在组件卸载或依赖项变化时执行，用于清理副作用。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时器执行');
  }, 1000);

  // 清理函数
  return () => {
    clearInterval(timer);
    console.log('定时器清理');
  };

多个 useEffect

你可以在一个组件中使用多个 useEffect，它们会按顺序执行。

useEffect(() => {
console.log('第一个 useEffect');
}, []);

useEffect(() => {
console.log('第二个 useEffect');
}, []);

组件之间的通信

父组件向子组件传递参数

父组件可以通过在子组件上添加属性来传递参数。子组件可以通过 props 对象来接收这些参数。

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Hello from Parent";

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ message }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
      </div> 
       );
      }
      export default ChildComponent;

父组件 ParentComponent 通过 message 属性将字符串传递给子组件 ChildComponent。子组件通过解构 props 对象来接收这个参数并显示在页面上。

子组件向父组件传递参数

子组件可以通过调用父组件传递给它的回调函数来传递参数。这通常用于处理用户输入或事件。

示例

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState("Initial Message");

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Message from Child: {message}</p>
      <ChildComponent onMessageChange={handleMessageChange} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react'; 
function ChildComponent({ onMessageChange }) { 
  const handleChange = (event) => { 
   onMessageChange(event.target.value); 
}; 

 return (
   <div> 
     <h2>Child Component</h2> 
     <input type="text" onChange={handleChange} /> 
   </div> 
    );
   } 
   export default ChildComponent;

父组件 ParentComponent 定义了一个状态 message 和一个用于更新状态的函数 handleMessageChange。这个函数作为属性 onMessageChange 传递给子组件 ChildComponent。子组件通过调用这个回调函数，将输入框的值传递给父组件。

总结

父组件向子组件传递参数：通过在子组件上添加属性，并在子组件中通过 props 对象接收这些属性。
子组件向父组件传递参数：通过在子组件中调用父组件传递给它的回调函数，并将参数作为回调函数的参数传递。

这一篇demo敲一遍，自己体会一下，能够直接上手react

vue转react，看这一篇就够了！！