React学习第一天

 创建React项目

 使用命令

npx create-react-app reat-basic

react-basic 是项目的名称可自定义

如果安装失败，一般是node版本问题，需要安装14以上的node版本。 

JSX

JSX 是一种 JavaScript 的语法扩展，广泛用于 React 框架中。尽管它看起来有点像 HTML，但实际上 JSX 在编译时会被转换成普通的 JavaScript 函数调用。理解 JSX 对于使用 React 来构建用户界面至关重要。 

JSX 看起来像 HTML 

 JSX 让你可以在 JavaScript 中书写类似 HTML 的结构，这使得定义 UI 组件变得更加直观和简单。例如：

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

 JSX 实际上是 JavaScript

 尽管 JSX 看起来很像 HTML，但它实际上是 JavaScript。在编译时（通常通过 Babel 这样的工具），JSX 会被转换为 React.createElement() 的函数调用。例如，上面的例子会被转换为：

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

 jsx基本语法

•  使用引号传递字符串
• 使用变量传递字符串
• 使用函数调用
• 方法调用
• 使用js对象

  const count = 100;
  function getNAme() {
    return 'tanmengxun';
  }
  function App() {
    return (
      <div className="App">
        this is App
        {/* 使用引号传递字符串 */}
        {'this is message '}
        {/* 使用变量传递字符串 */}
        {count}
        {/* 使用函数调用 */}
        {getNAme()}
        {/* 方法调用 */}
        {new Date().getDate()}
        {/* 使用js对象 */}
        <div style={{ backgroundColor: 'blue', color: 'white' }}>this is a div </div>
      </div>
    );
  }

  JSX 的优势

• 提高可读性：JSX 提供了一种直观的方式来描述 UI 应该是什么样子。
• 简化状态管理：通过结合 React 的组件化模型，JSX 可以让开发者更容易地管理和更新应用的状态。
• 集成 JavaScript 表达式：允许直接在标记中使用 JavaScript 表达式，便于动态内容生成。
• 总之，JSX 是一种强大的工具，它使得构建 React 应用更加简洁、直观，并且能够很好地与 JavaScript 集成。

 列表循环

 以组件的方式使用：创建一个list文件，放在与App.js同级目录下的base文件夹中。

list.js代码

创建一个函数，返回一个用div包裹的列表，使用items接受参数App.js父组件传来的参数，使用 .map() 方法动态渲染数组内容并对外暴露：

const List = ({ items }) => {
  return (
    <div>
        <h2>这是一个List组件</h2>
        <ul>
            {items && items.length > 0 && items.map((item, index) => 
                <li key={index}>{item}</li>
            )}
        </ul>
    </div>
    );
};

export default List;

 App.js文件

引入list.js文件：

import List from './base/list';

 定义一个数组，并将其作为 props 传递给 List 组件。

const myList = ['苹果', '香蕉', '橙子', '葡萄'];

在function中使用list组件：

function App() {

  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      {/* 将数组作为 props 传递给 List 组件 */}
      <List items={myList} />
    </div>
  );
}

函数事件的基本使用

 事件可以传递事件对象、自定义参数，以下面的例子说明：

const sonEvent = () => {
  console.log('son event');
  const handleClick = (val, e) => {
    console.log('son event button clicked', val, e);
  }
  return (<div>
    {/* 不传递参数 直接使用默认参数-事件对象 */}
    <button onClick={handleClick}>son event button</button>
    {/* 传递参数 */}
    <button onClick={() => handleClick('传递参数')}>son 参数</button>
    {/* 自定义参数和事件对象 注意顺序 */}
    <button onClick={(e) => handleClick('自定义参数', e)}>son 自定义参数</button>
    </div>
  );
}
export default sonEvent;

React组件

 在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签即可，可以看上面list.js代码部分。

父子组件传参 

1.父组件向子组件传递数据 (Props Down)

父组件通过 props 向子组件传递数据：

// 父组件
function Parent() {
  const [message, setMessage] = useState('Hello from parent');
  
  return <Child message={message} />;
}

// 子组件 通过结构的方式拿到父组件的props里的message的值
// 子组件只能读取props的值 不能修改父组件传来的的数据 但可以调用父组件的事件去修改
function Child({ message }) {
  return <div>{message}</div>;
}

2. 子组件向父组件传递数据 (Events Up) 

子组件通过调用父组件传递的回调函数来与父组件通信： 

// 父组件
function Parent() {
  const handleChildClick = (data) => {
    console.log('Data from child:', data);
  };
  
  return <Child onClick={handleChildClick} />;
}

// 子组件
function Child({ onClick }) {
  const handleClick = () => {
    onClick('Data from child');
  };
  
  return <button onClick={handleClick}>Click Me</button>;
}

 3.使用 Context 跨层级通信

对于深层嵌套组件，可以使用 Context 避免 prop drilling 

实现步骤：

1. 使用createContext方法创建衣蛾上下文对象
2. 在顶层组件中通过.Provider组件提供数据
3. 在底层组件中通过useContext钩子函数获取数据

import { createContext, useContext } from'react';
const MyContext = createContext();

// 父组件
function Parent() {
  return (
    <MyContext.Provider value={{ message: 'Hello from context' }}>
      <Child />
    </MyContext.Provider>
  );
}

// 子组件 (可以是任意深度的子组件)
function Child() {
  const { message } = useContext(MyContext);
  return <div>{message}</div>;
}

4. 使用 Refs 访问子组件实例 

对于类组件，可以使用 ref 直接访问子组件实例和方法：

// 父组件
class Parent extends React.Component {
  childRef = createRef();
  
  handleClick = () => {
    this.childRef.current.childMethod();
  };
  
  render() {
    return (
      <div>
        <Child ref={this.childRef} />
        <button onClick={this.handleClick}>Call Child Method</button>
      </div>
    );
  }
}

// 子组件
class Child extends React.Component {
  childMethod = () => {
    console.log('Child method called');
  };
  
  render() {
    return <div>Child Component</div>;
  }
}

对于函数组件，需要使用 forwardRef 和 useImperativeHandle：

// 子组件
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log('Child method called');
    }
  }));
  
  return <div>Child Component</div>;
});

 5. 事件总线 (Event Emitter)

对于复杂应用，可以使用事件总线模式：

// eventBus.js
const events = new Map();

export default {
  $on(event, callback) {
    if (!events.has(event)) events.set(event, []);
    events.get(event).push(callback);
  },
  
  $emit(event, ...args) {
    if (!events.has(event)) return;
    events.get(event).forEach(callback => callback(...args));
  }
};

// 父组件
function Parent() {
  useEffect(() => {
    eventBus.$on('child-event', (data) => {
      console.log('Received from child:', data);
    });
    
    return () => eventBus.$off('child-event');
  }, []);
  
  return <Child />;
}

// 子组件
function Child() {
  const emitEvent = () => {
    eventBus.$emit('child-event', 'Some data');
  };
  
  return <button onClick={emitEvent}>Emit Event</button>;
}

 

React状态视图 

 在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新。

React样式书写 

1. 行内样式（Inline Styles） 

可以直接在元素上通过style属性应用JavaScript对象形式的样式。（不推荐）

const divStyle = {
  color: 'blue',
  fontSize: '16px',
  backgroundColor: '#f0f0f0'
};
//注意：行内样式的键名是驼峰命名法（如fontSize而不是font-size），值需要是一个字符串或数字。

function MyComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

 2. CSS文件（常用）

 可以在React项目中创建传统的CSS文件，并像平常一样使用它们。首先，创建一个CSS文件（例如styles.css）：

/* styles.css */
.myClass {
  color: red;
  font-size: 20px;
}

然后在.js文件中引用它

import React from 'react';
import './styles.css'; // 导入CSS文件

function MyComponent() {
  return <div className="myClass">Hello World!</div>;
}

3. CSS模块

如果你希望样式仅适用于特定组件，可以使用CSS模块。这有助于避免全局作用域中的类名冲突。

假设你有一个名为Button.module.css的文件：

/* Button.module.css */
.error {
  background-color: red;
  color: white;
}

 然后，在你的组件中使用它：

import React from 'react';
import styles from './Button.module.css'; // 注意这里如何导入

function Button({ error }) {
  return (
    <button className={error ? styles.error : ''}>
      Click me
    </button>
  );
}
// 当使用CSS模块时，React会自动将类名转换为局部作用域的名称。

4. 使用Styled Components 

Styled Components是一种流行的库，允许你直接在JavaScript中写CSS代码。它提供了一种更动态的方式定义样式，并且每个组件都有自己的样式范围。

首先，安装styled-components：

npm install styled-components

 然后，你可以这样创建和使用样式化组件：

import React from 'react';
import styled from 'styled-components';

// 创建一个Title组件，具有自定义样式
const Title = styled.h1`
  color: blue;
  font-size: 1.5em;
`;

function MyComponent() {
  return <Title>Hello World!</Title>;
}

useEffect的作用