第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

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

   1. 例如：export default App;? ?

   2. import App from './App';

   3. 導(dǎo)出和導(dǎo)入是成對出現(xiàn)的。

4. 組件中必須有一個(gè) render 函數(shù)。（老版本的語法）
   

項(xiàng)目的創(chuàng)建以及啟動(dòng)：

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行內(nèi)樣式：1、以{{background:'red',color:'#fff'}}對象形式進(jìn)行編碼

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

父組件，代碼優(yōu)化，.bind(this)優(yōu)化，提高代碼執(zhí)行性能

父組件向子組件傳值，刪除功能。父組件傳遞list下標(biāo)、delete方法，子組件通過刪除下標(biāo)、delete方法來刪除數(shù)據(jù)

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

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

const list = [...this.state.list]，拷貝副本list，操作list比直接操作this.state.list易于排錯(cuò)。根據(jù)list下標(biāo)刪除數(shù)據(jù)

onChange()數(shù)據(jù)綁定

組件的構(gòu)造函數(shù)，組件創(chuàng)建時(shí)會(huì)自動(dòng)的被執(zhí)行。map函數(shù)，循環(huán)list。this指向。

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

render函數(shù)

構(gòu)建react腳手架工具命令：

npx creact-react-app my-app

cd myapp

npm start

React Fiber 16+

import React, { useState } from 'react'; // 導(dǎo)入React和useState函數(shù)

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

?// 當(dāng)輸入框中的內(nèi)容改變時(shí)調(diào)用該函數(shù)
?function handleInputChange(event) {
? ?setInputValue(event.target.value); // 將輸入框的值更新為最新值
?}

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

?// 當(dāng)用戶點(diǎn)擊某個(gè)任務(wù)的刪除按鈕時(shí)調(diào)用該函數(shù)
?function handleDeleteButtonClick(index) {
? ?const newTodos = [...todos]; // 創(chuàng)建一個(gè)新數(shù)組，用于存儲(chǔ)更新后的任務(wù)列表
? ?newTodos.splice(index, 1); // 從新數(shù)組中刪除指定位置的任務(wù)
? ?setTodos(newTodos); // 將新數(shù)組設(shè)置為todos的新值
?}

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

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

export default TodoList; // 導(dǎo)出TodoList組件

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

組件就是網(wǎng)頁上的一個(gè)標(biāo)簽/所有大寫字母開頭的都是組件

使用 <React.Fragment 標(biāo)簽代替最外層的包括<div 標(biāo)簽

這樣的區(qū)別是里面的兩個(gè)標(biāo)簽都是在外層而不會(huì)查看源碼的時(shí)候多一層<div

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

優(yōu)雅的寫法

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

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

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

定義一個(gè)style.css 樣式文件

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

使用樣式類

要用className='red-btn'，不能使用class= 因?yàn)閏lass 是類的關(guān)鍵字

給標(biāo)簽添加樣式

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

第一個(gè){} 花括號(hào)是表示是JS表達(dá)式，

第二個(gè){} 花括號(hào)是表示JS對象。

{}花括號(hào)也叫大括號(hào)

抽離標(biāo)簽里面的代碼，定義為函數(shù)，直接{函數(shù)名}調(diào)用即可。

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

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

把寫在標(biāo)簽里面的bind(this) 提取到 constructor 構(gòu)造函數(shù)中，提升性能

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

子組件向父組件傳值，要調(diào)用父組件傳遞過來的方法

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

如：

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

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

{this.props.xxx}?

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

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

xxx 為定義傳遞的參數(shù)名

定義傳遞的參數(shù)名 content

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

拆分，新建一個(gè)小組件

固定語法：

// 引入react

import React from 'react'

// 繼承React.Component組件

class TodoItem extends React.Component {

? // 返回標(biāo)簽

? render() {

? ? <div>xxx xxx</div>

? }

}

// 別忘了導(dǎo)出組件

export default TodoItem;

使用自定義組件：

1、導(dǎo)入自定義組件

import TodoItem from './TodoItem';

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

<TodoItem />