React
中文官网: https://reactjs.bootcss.com/
英文官网: https://reactjs.org/
概念
React是一个用于构建用户界面的JavaScript库.
特性
命令式编程和声明式编程
命令式编程是 告诉计算机怎么做,是告诉过程
声明式编程是 告诉计算机要做什么,是告诉结果的.
基本使用React
基于浏览器的模式
-
React.js 提供 核心代码，如：虚拟 dom，组件 引入: <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> React.createElement(type,props,children);
type 标签的类型(如 div,ul,li等等)
props 标签的属性(如 class,id等等)
children 标签自身的子元素
<!-- 02_利用react创建视图 -->
ReactDOM.render(
React.createElement('h1',null,'我是一个标题'),
document.querySelector('#root'),
()=>{
console.log('渲染成功');
}
);
<!-- 02_利用react创建视图 -->
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('渲染成功');
}
);
-
ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染 引入: <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> ReactDOM.render(element, container[, callback])
element：要渲染的内容(必选参数)
container：要渲染的内容存放容器(必选参数)
callback：渲染后的回调函数 (可选参数)
<div id="root"></div>
<!-- 01_react基本使用 -->
ReactDOM.render(
"易烊千玺",
document.querySelector('#root'),
()=>{
console.log('渲染成功');
}
);
JSX
JSX是基于 JavaScript + XML 的一个扩展语法.
引入:<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 03_JSX -->
<script type="text/babel">
ReactDOM.render(
<header>
<h1>hello react</h1>
<p>利用JSX来渲染</p>
</header>,
document.querySelector('#root'),
()=>{
console.log('渲染成功');
}
);
</script>
插值表达式
使用 一个花括号就可以显示出来值 {表达式}
注意: 在JSX中不支持语句写法(if语句, for循环, while)
输出数据类型
-
字符串,数字原样输出; -
布尔值,空,未定义直接不输出
列表渲染
- 数组 去掉逗号原样输出
- 对象直接报错,可以单独找他的某个属性来让他输出
let data = {
name:'张三',
age:18
};
条件渲染
- 三元运算符 —
? 类似 if...else语句 - 与或运算符 —
|| 类似 if(!) 取反; && 类似 if()
<h1>{ true ? '成立' : '不成立' }</h1>
<p>{ true || '利用JSX来渲染' }</p>
<div>{ true && '正确' }</div>
列表循环
let data = ['内容1','内容2','内容3'];
ReactDOM.render(
<header>
{
data.map((item)=>{
return <li>{item}</li>
})
}
</header>,
document.querySelector('#root'),
()=>{
console.log('渲染成功');
}
);
注释
{/*注释*/}
{/*
多行注释
*/}
JSX的注意事项
JSX: 基于 JavaScript 和 XML 的扩展语法
? 它可以作为值使用
? 它并不是字符串
? 它也不是html
? 它可以配合 js表达式 一起使用
? 它不可以和 JS语句 一起使用
? 所有的标签名必须是小写
? 所有的标签必须闭合,哪怕是单标签
? class 要写成className(现在class和className都可以的)
<div>
<div className='box'></div>
</div>
? style 接受的是一个对象,并不是字符串
<div>
<div class='box' style={style}></div>
</div>,
? 每次只能输出一个标签(或者说必须有一个容器)
? 唯一父级/唯一容器
let {Fragment} = React;
<Fragment>
<div class='box' style={style}></div>
<p>我是一个段落标签</p>
</Fragment>,
基于自动化的集成环境模式 create-react-app-脚手架
安装
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
查看版本号
npx --version
创建项目
-
create-react-app <项目名称>
-
或者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
npm run test — 运行 Jest 测试
npm run build — 打包应用（准备上线）
组件
对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。
类式组件
16.7版本之前有的
-
组件类必须继承 React.Component -
组件类必须有 render 方法 -
render 方法的 return 后定义组件的内容
import React,{Component} from 'react';
class App extends Component {
render(){
return (<div>你好</div>)
}
}
export default App;
案例:
<!-- app.js -->
import React,{Component} from 'react';
import FriendList from "./FriendList";
class App extends Component {
render(){
return (<div>
<FriendList/>
</div>)
}
}
export default App;
<!-- FriendList.js -->
import React,{Component} from 'react';
import "./FriendList.css";
export default class FriendList extends Component {
render (){
return (
<div className="friend-list">
<div className="friend-group">
<dt>家人</dt>
<dd>爸爸</dd>
<dd>妈妈</dd>
</div>
<div className="friend-group">
<dt>朋友</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
</div>
<div className="friend-group">
<dt>客户</dt>
<dd>阿里</dd>
<dd>腾讯</dd>
<dd>头条</dd>
</div>
</div>
)
}
}
.friend-list {
border: 1px solid #000000;
width: 200px;
}
.friend-group dt {
padding: 10px;
background-color: rgb(64, 158, 255);
font-weight: bold;
}
.friend-group dd {
padding: 10px;
}
.friend-group.expanded dd {
display: block;
}
.friend-group dd.checked {
background: green;
}
组件复用 - 数据抽取
<!-- data.js -->
let datas = {
family: {
title: '家人',
list: [
{name: '爸爸'},
{name: '妈妈'}
]
},
friend: {
title: '朋友',
list: [
{name: '张三'},
{name: '李四'},
{name: '王五'}
]
},
customer: {
title: '客户',
list: [
{name: '阿里'},
{name: '腾讯'},
{name: '头条'}
]
}
};
export default datas;
<!-- FriendList.js -->
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,index)=>{
return (
<Dl
key = {index}
name = {item}
value = {data[item]}
/>
)
})
}
</div>
)
}
}
<!-- dl.js -->
import React,{ Component } from "react";
export default class Dl extends Component{
render(){
console.log(this.props);
let {title,list} = this.props.value;
return (
<div className="friend-group">
<dt>{title} </dt>
{
list.map((item,index)=>{
return <dd key={index} >{item.name}</dd>
})
}
</div>
)
}
}
props和state
- props 父组件传递过来的参数
- state 组件自身状态
props 与 state 的区别
state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state;
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改.
state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state
React中的事件
总结
- React是一个用于构建用户界面的JavaScript库.
- 特性是一个渐进式框架
- JSX是基于 JavaScript + XML 的一个扩展语法.
- 类式组件和函数组件
|