什么是React?
React 是一个用于构建用户界面的 JavaScript 库
如何使用 React
基于浏览器模式
(一)引入react.js : react.js提供react的核心功能代码 如:虚拟dom 组件
React.createElement(type,props,children);
type : 类型(也就是标签)
props: 属性(id、class、style…)
chidren: 可以写标签也可以写内容
//第一种方法
<script>
ReactDOM.render(
React.createElement("h1",null,"我是一个标签"),
document.querySelector("#root"),
//回调函数 如有需求可以往里面写 没有的话可以删除
()=>{
console.log("渲染成功")
}
)
</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("渲染成功")
}
)
(二)引入react-dom.js: react-dom.js提供了与浏览器交互的DOM功能 如:dom 渲染
ReactDOM.render(element, container[, callback])
element:要渲染的内容
container:存放内容的容器
callback:渲染后的回调函数
<div id="root"></div>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script>
/*
React.js 提供 核心代码
ReactDOM 提供了与浏览器交互的DOM功能, 如 虚拟DOM
*/
ReactDOM.render(
"今天天气不错",
document.querySelector("#root"),
//回调函数 如有需求可以往里面写 没有的话可以删除
()=>{
console.log("渲染成功")
}
)
</script>
JSX
JSX: 基于javaScript 和 Xml 的扩展语法
在JSX使用之前需要在文件内引入babel.js 并且将script中的type改为啊"text/babel" 然后才能将数据渲染到页面中
<script src="./js/babel.js"></script>
<script type="text/babel">
/*
JSX: 基于javaScript 和 Xml 的扩展语法
*/
ReactDOM.render(
<header>
<h1>hello react</h1>
<p>利用JSX来渲染</p>
</header>,
document.querySelector("#root"),
//回调函数 如有需求可以往里面写 没有的话可以删除
() => {
console.log("渲染成功")
}
)
</script>
插值表达式
各种类型内容在插值中的使用
注释 {/注释/} {/* 多行注释 */}
输出数据类型
字符串、数字:原样输出
布尔值、空、未定义 会被忽略
列表渲染
数组
对象 扩展:虚拟 DOM (virtualDOM) 和 diff
//各种数据的插值状态
// let str = "天气还不错" // 原样输出
// let data = 1 //原样输出
// let data = false //不输出
// let data = undefined //不输出
// let data = null //不输出
// let data = ['内容1,','内容2,','内容3'] // 没有,原样输出
// 对象需要单独输出上去
let data={
name:'白悠悠',
age:18
}
条件渲染
三元运算符
//条件输出
ReactDOM.render(
<header>
<h1>{true?"成立":"不成立"}</h1>
<p>利用JSX来渲染</p>
</header>,
document.querySelector("#root"),
//回调函数 如有需求可以往里面写 没有的话可以删除
() => {
console.log("渲染成功")
}
)
与或运算符
// ? : 类似于 if...else
// || 类似于 if(!) 取反
// && 类似于 if()
列表循环
let data = [
"内容1",
"内容2",
"内容3",
"内容4"
]
//第一种方法
function toData() {
let arr = []
data.forEach(item => {
arr.push(<li>{item}</li>)
})
return arr
}
ReactDOM.render(
<header>
{toData()}
</header>,
document.querySelector("#root"),
//回调函数 如有需求可以往里面写 没有的话可以删除
() => {
console.log("渲染成功")
}
)
//第二种方法
ReactDOM.render(
<header>
<ul>
{
data.map(item => {
return <li>{item}</li>
})
}
</ul>
</header>,
document.querySelector("#root"),
//回调函数 如有需求可以往里面写 没有的话可以删除
() => {
console.log("渲染成功")
}
)
JSX注意事项 :
- 它可以作为值使用
- 它并不是字符串
- 它也不是html
- 它可以配合JS 表达式一起使用
- 它不可以和JS 语句一起使用
- 所有的标签名必须是小写
- 所有的标签必须闭合,哪怕是单标签
- class 要写做 className - style 接收的是一个对象,并不是字符串
- 每次只能输出一个标签(或者说必须要有一个容器)
- 唯一父级/唯一容器
- 也可以换成Fragment,可以不在页面显示
let style = {
width:'200px',
height:'200px',
background:'red'
}
ReactDOM.render(
// <div>
// <div className="box" style={{width:"400px",height:"300px"} }></div>
// </div>,
<div>
<div className="box" style={style}></div>
</div>,
document.querySelector("#main"),
)
基于自动化的集成环境模式 - create-react-app - 脚手架
介绍
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 <项目名称>
组件
对具有一定独立功能的数据与方法的封装,对外暴露接口,有利于代码功能的复用,且不用担心冲突问题。
函数式组件
函数的名称就是组件的名称
函数的返回值就是组件要渲染的内容
类式组件
组件类必须继承 React.Component
组件类必须有 render 方法
render 方法的 return 后,定义组件的内容
ps:都要记得导出
在index.js中绑定容器
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
定义根组件,绑定需要引入的组件
import React,{Component} from 'react'
import FriendList from './FriendList'
/*
1.组件类必须继承 React.Component
2.组件类必须有 render 方法
3.render 方法的return后 定义组件的内容
ps:记得导出
*/
class App extends Component {
render(){
return (
<div>
<FriendList/>
</div>
)
}
}
export default App;
根组件定义内容
import React,{Component} from 'react'
import './FriendList.css'
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>
)
}
}
export default FriendList;
事件
什么是事件
React 的事件处理和 DOM 元素类似。但是语法上是不同的:
1.React 事件绑定属性时采用驼峰命名法,而不是小写。
2.如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法)
事件的写法
HTML中的写法
<button onClick="addAge()">点我啊</button>
JSX中的写法
<button onClick={this.addAge}>点我啊</button>
也可以拉出去写个函数
class App extends Component {
state = {
nub : 20,
name:'亚峰',
sex:'胖子'
}
// add =()=>{
// console.log(this)
// }
render(){
let {nub} = this.state
return (
<div>
<p>{this.state.sex}</p>
<p>{this.state.nub}</p>
<button onClick={()=>{
this.setState(
{nub:nub+1,sex:'可爱得胖子'}
)
}}>长一岁</button>
</div>
)
}
}
state是什么
state——组件自身状态
state与props的区别是什么
1.state 的主要作用是用于组件保存、控制、修改 自己 的可变状态,在组件内部进行初始化,也可以在组件内部进行修改,但是组件外部不能修改组件的 state
2.props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件,它是外部传进来的配置参数,组件内部无法控制也无法修改
3.state 和 props 都可以决定组件的外观和显示状态。通常,props 做为不变数据或者初始化数据传递给组件,可变状态使用 state
父子组件
将父组件的方法或者状态在子组件入口传进去,在子组件里可直接在this.props中获取使用。
父组件 父组件通过属性把值传递到子组件里面去
class FriendList extends Component {
state = {
isOpen:"" //哪一项是展开的
}
//传递给子组件,点击哪个子组件,子组件就将自身的name传参过来
changeOpen = (name)=>{
this.setState({isOpen:name})
}
render(){
let {isOpen} = this.state
return (
<div className="friend-list">
{
Object.keys(data).map((item,index)=>{
return (
<Dl
key = {index}
name = {item}
value = {data[item]}
isOpen = {isOpen}
changeOpen = {this.changeOpen}
/>)
})
}
</div>
)
}
}
子组件 子组件就是通过父组件定义好的回调函数传到子组件里,子组件里的值在通过回调函数,返回到父组件里
export default class Dl extends Component{
// state = {
// isOpen : true
// }
render(){
console.log(this.props)
let {title,list} = this.props.value
// name : 自身数据的属性名
// isOpen : 哪一项需要展开
let {name,isOpen,changeOpen} = this.props
// let {isOpen} = this.state
return(
<div className={"friend-group" + (name==isOpen?" expanded":"")}>
<dt onClick={()=>{
changeOpen(name)
}
}>{title}</dt>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</div>
)
}
}
props 和 state
props 父组件传递过来的参数
state 组件自身状态
state 和 setState
setState(updater, [callback])
updater: 更新数据 FUNCTION/OBJECT
callback: 更新成功后的回调 FUNCTION
异步:react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能
浅合并 Objecr.assign()