亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

1. 組件名稱必須是大學開頭。例如：App

2. 組件必須繼承 Component ，或者 React.Component?

3. 組件必須導出之后，在其他頁面才能導入。

   1. 例如：export default App;? ?

   2. import App from './App';

   3. 導出和導入是成對出現的。

4. 組件中必須有一個 render 函數。（老版本的語法）
   

項目的創建以及啟動：

npx create-react-app my-app

cd my-app

npm start

疑問：react 難道沒有版本的概念嗎？? 這樣使用的是什么版本的react ，難道是跟 nodejs 綁定的版本？

React 簡介。

React Fiber 是 React 16 之后的版本名字。

<React.Fragment>

類似vue的<template>

包引入，<Fragment>改為<React.Fragment>

Fragment布局，<React.Fragment>替代<div>

css行內樣式：1、以{{background:'red',color:'#fff'}}對象形式進行編碼

2、className形式，className = ‘red-btn’

父組件，代碼優化，.bind(this)優化，提高代碼執行性能

父組件向子組件傳值，刪除功能。父組件傳遞list下標、delete方法，子組件通過刪除下標、delete方法來刪除數據

組件間的通信\數據的傳遞，通過屬性content、的方式傳遞數據。父組件為TodoList，屬性content傳遞。子組件為TodoItem，屬性props接收數據

this.setState({list})鍵和值一樣可以這么寫代碼

const list = [...this.state.list]，拷貝副本list，操作list比直接操作this.state.list易于排錯。根據list下標刪除數據

onChange()數據綁定

組件的構造函數，組件創建時會自動的被執行。map函數，循環list。this指向。

jsx語法：可以在語法里面寫正常的標簽（如：<div>）和js表達式（如：{1+2}）

render函數

構建react腳手架工具命令：

npx creact-react-app my-app

cd myapp

npm start

React Fiber 16+

import React, { useState } from 'react'; // 導入React和useState函數

function TodoList() {
?const [todos, setTodos] = useState([]); // 創建一個狀態變量todos，初始值為空數組
?const [inputValue, setInputValue] = useState(''); // 創建一個狀態變量inputValue，初始值為空字符串

?// 當輸入框中的內容改變時調用該函數
?function handleInputChange(event) {
? ?setInputValue(event.target.value); // 將輸入框的值更新為最新值
?}

?// 當用戶點擊添加按鈕時調用該函數
?function handleAddButtonClick() {
? ?if (inputValue.trim() !== '') { // 首先確保輸入框中有內容
? ? ?setTodos([...todos, inputValue]); // 將新任務添加到todos數組中
? ? ?setInputValue(''); // 將輸入框的值重置為空字符串
? ?}
?}

?// 當用戶點擊某個任務的刪除按鈕時調用該函數
?function handleDeleteButtonClick(index) {
? ?const newTodos = [...todos]; // 創建一個新數組，用于存儲更新后的任務列表
? ?newTodos.splice(index, 1); // 從新數組中刪除指定位置的任務
? ?setTodos(newTodos); // 將新數組設置為todos的新值
?}

?// 渲染任務列表
?const todoListItems = todos.map((todo, index) => (
? ?<li key={index}>
? ? ?{todo}
? ? ?<button onClick={() => handleDeleteButtonClick(index)}>刪除</button>
? ?</li>
?));

?// 渲染整個組件
?return (
? ?<div>
? ? ?<h1>Todo List</h1>
? ? ?<input type="text" value={inputValue} onChange={handleInputChange} />
? ? ?<button onClick={handleAddButtonClick}>添加</button>
? ? ?<ul>{todoListItems}</ul>
? ?</div>
?);
}

export default TodoList; // 導出TodoList組件

// 上述代碼中，我們使用了useState函數來創建兩個狀態變量：
// - todos：用于存儲任務列表，初始值為空數組。
// - inputValue：用于存儲輸入框中的值，初始值為空字符串。
//
// 我們還定義了三個函數來處理用戶的操作：
// - handleInputChange：當輸入框中的值改變時調用該函數，將最新的值存儲在inputValue狀態變量中。
// - handleAddButtonClick：當用戶點擊添加按鈕時調用該函數，將輸入框中的值添加到todos數組中，并將輸入框的值重置為空字符串。
// - handleDeleteButtonClick：當用戶點擊某個任務的刪除按鈕時調用該函數，從todos數組中刪除指定位置的任務。
//
// 最后，我們使用map函數將todos數組中的每個任務渲染為一個列表項，并為每個列表項添加一個刪除按鈕。最終渲染的結果是一個包含輸入框、添加按鈕、任務列表和刪除按鈕的todo list應用。
//
// 需要注意的是，我們在渲染列表項時為每個列表項設置了一個唯一的key屬性，這是為了幫助React更高效地更新DOM。因為React需要知道哪些元素是新增的、哪些元素是刪除的、哪些元素是需要更新的，從而進行最小化的DOM操作，提高應用的性能。

組件就是網頁上的一個標簽/所有大寫字母開頭的都是組件

使用 <React.Fragment 標簽代替最外層的包括<div 標簽

這樣的區別是里面的兩個標簽都是在外層而不會查看源碼的時候多一層<div

原來的寫法有兩層<div 包裹

優雅的寫法

import React, {Component, Fragment} from 'react'

那么繼承React.Component 就不需要寫前面的React.了

<React.Fragment 也可以直接寫成 <Fragment

定義一個style.css 樣式文件

import './style.css' 引入樣式

使用樣式類

要用className='red-btn'，不能使用class= 因為class 是類的關鍵字

給標簽添加樣式

方法一：使用style = {{屬性: '樣式值'}}

第一個{} 花括號是表示是JS表達式，

第二個{} 花括號是表示JS對象。

{}花括號也叫大括號

抽離標簽里面的代碼，定義為函數，直接{函數名}調用即可。

使用 const 定義某變量，代替 this.props

this.props.content 則可使用 const 中的變量名代替

把寫在標簽里面的bind(this) 提取到 constructor 構造函數中，提升性能

其它子組件也一樣，構造函數中定義方法等于bind(this);

子組件向父組件傳值，要調用父組件傳遞過來的方法

this.props.index 表示獲取父組件傳遞過來的名為index的參數

如：

父組件向子組件傳遞了名為delete的方法

子組件通過props即可調用父組件傳遞過來的名為delete的方法，并向方法傳遞了this.props.index參數值

{this.props.xxx}?

父組件通過屬性的形式向子組件傳遞參數，

子組件通過props接收父組件傳遞過來的參數。

xxx 為定義傳遞的參數名

定義傳遞的參數名 content

賦key={index} 排除沒有key值警告

拆分，新建一個小組件

固定語法：

// 引入react

import React from 'react'

// 繼承React.Component組件

class TodoItem extends React.Component {

? // 返回標簽

? render() {

? ? <div>xxx xxx</div>

? }

}

// 別忘了導出組件

export default TodoItem;

使用自定義組件：

1、導入自定義組件

import TodoItem from './TodoItem';

2、聲明并使用自定義組件

<TodoItem />