文章目錄
- 前言
- 一、React是什么？
- 二、如何使用
- 1.基于瀏覽器的模式
- babel
- 代碼如下：
- 2.利用react 創建視圖
- 3.JSX
- 4.插值運算式
- 代碼示例
- 5.條件輸出
- 輸出資料型別
- 串列渲染
- 條件渲染
- 6.串列回圈
- 基于自動化的集成環境模式 - create-react-app - 腳手架
- 安裝與使用
- 安裝
- yarn
- 使用
- npx
- 專案目錄結構說明
- 命令腳本
- npm start
- 類式組件
- 代碼示例
- props 和 state
- props 與 state 的區別
- 組件通信與資料流
- 資料代碼
- React 中的事件注意問題
- 總結
前言
今天我們一起來學習react的內容，簡單的學習一下，
一、React是什么？
是一個用于構建用戶界面的 JavaScript 庫，
二、如何使用
1.基于瀏覽器的模式
React.js 提供 React.js 核心功能代碼，如：虛擬 dom，組件
-
React.createElement(type,props,children);
-
ReactDOM 提供了與瀏覽器互動的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
- element：要渲染的內容
- container：要渲染的內容存放容器
- callback：渲染后的回呼函式
- ReactDOM.render(element, container[, callback])
babel
babel-standalone.js：在瀏覽器中處理 JSX
react.development.js提供了核心代碼
react-dom.development.js提供了與瀏覽器互動的Dom功能
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
/*
`react.development.js 提供了核心代碼
react-dom.development.js提供了與瀏覽器互動的Dom功能
基礎格式
*/
ReactDOM.render(
"今天天氣",
document.querySelector("#root"),
()=>{
console.log("渲染成功");
}
);
</script>
</body>
</html>
2.利用react 創建視圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
let h1 = React.createElement("h1",null,"我是一個標題");
let p = React.createElement("p",null,"我是一個段落標簽");
let el= React.createElement("header",{id:"header"},h1,p);
ReactDOM.render(
el,
document.querySelector("#root"),
()=>{
console.log("渲染成功");
}
);
</script>
</body>
</html>
3.JSX
是一個基于 JavaScript + XML 的一個擴展語法
-
它可以作為值使用
-
它并不是字串
-
它也不是HTML
-
它可以配合JavaScript 運算式一起使用
不可以和js陳述句一起使用
所有的標簽名必須是小寫
所有標簽必須閉合，哪怕單標簽class 要寫做 className
style 接收的是一個物件，并不是字串
每次只能輸出一個標簽（或者說必須要有一個容器）
唯一父級 唯一容器
JSX 使用注意事項
- 必須有,且只有一個頂層的包含元素 - React.Fragment
- JSX 不是html，很多屬性在撰寫時不一樣
- className
- style
- 串列渲染時，必須有 key 值
- 在 jsx 所有標簽必須閉合
- 組件的首字母一定大寫，標簽一定要小寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
JSX ：javascript 和 xml的擴展語法
*/
ReactDOM.render(
<header>
<h1> hello react</h1>
<p>利用JSX來渲染</p>
</header>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
4.插值運算式
在 JXS 中可以使用 {運算式} 嵌入運算式
運算式：產生值的一組代碼的集合
- 變數
- 算術運算
- 函式呼叫
- ……
注意：分清楚 運算式 與 陳述句 的區別，if、for、while 這些都是陳述句，JSX 不支持陳述句
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 各種資料的插值狀態
// let str = "天氣" //原樣輸出
// let str = 1; //原樣輸出
// let str = false; //不輸出
// let str = undefined;//不輸出
// let str = null;//不輸出
// let str = ["內容1","內容2"];//去掉，原樣輸出
let str ={
name: "拜拜",
age:18
} //報錯 要單獨去找某個屬性
ReactDOM.render(
<header>
<h1> {str.name}不錯</h1>
<p>利用JSX來渲染</p>
</header>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
5.條件輸出
輸出資料型別
- 字串、數字：原樣輸出
- 布林值、空、未定義 會被忽略
串列渲染
- 陣列
- 物件
擴展：虛擬 DOM （virtualDOM） 和 diff
條件渲染
- 三元運算子
- 與或運算子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 條件輸出
// ?: 類似 if...else
// || 類似 if(!) 取反
// && 類似 if()
ReactDOM.render(
<header>
<h1>{true?"成立":"不成立"}</h1>
<p>{false||"利用JSX來渲染"}</p>
<div>{true&&"正確"}</div>
</header>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
6.串列回圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root">
<!-- <ul v-for="item in arr">
<li>{{item}}</li>
</ul> -->
</div>
<script type="text/babel">
let data =[
"內容1",
"內容2",
"內容3",
"ddd"
]
function toData(){
let arr=[];
data.forEach(item=>{
return arr.push(<li>{item}</li>)
})
return arr;
}
// ReactDOM.render(
// <header>
// {toData()}
// </header>,
// document.querySelector("#root"),
// () => {
// console.log("渲染成功");
// }
// );
ReactDOM.render(
<ul>
{
data.map(item=>{
return<li>{item}</li>
})
}
</ul>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
基于自動化的集成環境模式 - create-react-app - 腳手架
通過前面 script 的方式雖然也能完成 React.js 的開發，但是有一個現在前端很重要的特性 - 模塊化，無法使用，
Create React App 是一個使用 Node.js 撰寫的命令列工具，通過它可以幫助我們快速生成 React.js 專案，并內置了 Babel、Webpack 等工具幫助我們實作 ES6+ 決議、模塊化決議打包，也就是通過它，我們可以使用 模塊化 以及 ES6+ 等更新的一些特性，同時它還內置 ESLint 語法檢測工具、Jest 單元測驗工具，還有一個基于 Node.js 的 WebServer 幫助我們更好的在本地預覽應用，其實還有更多，
安裝與使用
通過 npm、yarn、npx 都可以
安裝
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
使用
安裝完成以后，即可使用 create-react-app 命令
create-react-app <專案名稱>
或者通過 npx 的方式
npx
npx create-react-app <專案名稱>
專案目錄結構說明
運行命令以后，就會在運行命令所在目錄下面創建一個以專案名稱為名的目錄
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
命令腳本
create-react-app 同時也提供了其它一些命令來幫助我們進行開發
npm start
啟動一個內置的本地 WebServer，根目錄映射到 ‘./public’ 目錄，默認埠：3000
類式組件
- 組件類必須繼承 React.Component
- 組件類必須有 render 方法
代碼示例
import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component {
render(){
return (
<div className="friend-list">
{
Object.keys(data).map(item=>{
return (<Dl
name = {item}
value ={data[item]}
/>)
})
}
</div>
)
}
}
props 和 state
- props 父組件傳遞過來的引數
- state 組件自身狀態
- setState
- 多個 setState 合并‘
import React,{Component} from "react";
export default class Dl extends Component {
state ={
isOpen:true
}
render() {
let {title,list} = this.props.value;
let {isOpen} = this.state;
return(
<div className={"friend-group" +(isOpen ? "expanded":"")}>
<dt onClick={
()=>{
this.setState({isOpen:!isOpen})
}
}>{title}</dt>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</div>
)
}
}
props 與 state 的區別
state 的主要作用是用于組件保存、控制、修改 自己 的可變狀態，在組件內部進行初始化，也可以在組件內部進行修改，但是組件外部不能修改組件的 state
props 的主要作用是讓使用該組件的父組件可以傳入引數來配置該組件，它是外部傳進來的配置引數，組件內部無法控制也無法修改
state 和 props 都可以決定組件的外觀和顯示狀態，通常，props 做為不變資料或者初始化資料傳遞給組件，可變狀態使用 state
組件通信與資料流
在 React.js 中，資料是從上自下流動（傳遞）的，也就是一個父組件可以把它的 state / props 通過 props 傳遞給它的子組件，但是子組件不能修改 props - React.js 是單向資料流，如果子組件需要修改父組件狀態（資料），是通過回呼函式方式來完成的，
- 父級向子級通信
- 子級向父級通信
資料代碼
let datas = {
family:{
title:"家人",
list:[
{name: "爸爸"},
{name: "媽媽"}
]
},
friend:{
title:"朋友",
list:[
{name: "張三"},
{name: "李四"},
{name: "王五"},
]
}
}
export default datas;
React 中的事件注意問題
- 大小寫問題
onClick 必須用大寫，否則會報錯
<button onClick={()=>{
this.setState({nub:nub+1})
}}>長一歲</button>
- this 問題
總結
今天我們主要學習了react 的一些基礎內容，它包含了一些注意的地方，比如渲染時要包含的資料要用單{}去包裹，
所有標簽必須閉合，哪怕單標簽，這和我們之前學習的內容是一個很大的不同點，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290672.html
標籤：其他