什么是react
在这一个小时内对react的认识中，我有了对react的初步印象
- js库
- facebook开发的
- 高度的组件化
- 使用jsx
- 将html和js结合
- 单项传输数据
- 虚拟dom
- 只负责view层
react并不是一个完整的mvc或者mvvm框架，只是负责view层，特点是“轻”，组件化的开发：组件高度的可重用。含义是将有独立功能的UI控件封装起来，将UI上的每一个独立的模块定义成组件，通过组合或者嵌套的方式构成大的组件，完成完整的UI
react应用场景
- 复杂场景下的高性能
- 重用组件库，组件组合
- “懒”
React基础总结
-
React工作方式
state—》视图—》修改state—》newState----》新视图
只要对state进行修改，React就会重新渲染视图，大量的DOM操作不会对页面性能有影响，React采用了一种虚拟DOM的核心技术，每一个组件都会生成一个虚拟DOM树，它是以纯对象的方式进行描述的，React会根据虚拟DOM来生成真实的DOM，组件中的数据变化会生成一个新的虚拟DOM，React会对比新旧的虚拟DOM，找出变化点，然后针对变化的节点进行重新渲染，极大提高了重新渲染的性能。 -
React两个核心文件
（1）react.js，比如组件、Hooks、虚拟DOM等都在这个文件中
（2）react-dom.js是对真实DOM的相关操作，如将虚拟DOM渲染到真实的DOM里，或者从真实的DOM中获取节点 -
ReactDOM是react-dom.js提供的一个用于进行DOM操作的对象，该对象提供了一系列操作DOM的API
开发过程中常用的API如下
（1）render
ReactDOM.render(element, container,[,callback])
element：是React生成的虚拟DOM，也叫做ReactElement或ReactNode，也可以直接用字符串去实现
container：真实的DOM节点，将element渲染到该真实节点下面
callback：将虚拟DOM渲染到container后的回调函数
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'), ()=>{alert('渲染成功')});
（2）unmountComponentAtNode
ReactDOM.unmountComponentAtNode(container)
container：真实DOM节点（将该真实DOM下的组件删除）
- JSX
展开来说就是JavaScript + XML，看起来很像XML的JavaScript语法扩展。如下，可以直接在js中利用前端的html标签构建视图，jsx本身是一个值，它是一个ReactElement对象，要注意如果直接写一个字符串，它就是一个文本，不会被解析为对象
ReactDOM.render(
<div>
<h1>hello world</h1>
</div>,
document.getElementById('root'));
- 插值表达式：{数据}
使用JSX时，如果需要视图和数据进行绑定，就需要用到插值表达式，就是在视图中插入数据
let a = 'hello';
let b = 'React';
ReactDOM.render(
<div>
<h1>{a + b}</h1>
</div>,
document.getElementById('root'));
使用插值表达式注意点：
（1）{}中，接收一个JS表达式，可以使运算式、变量或函数调用
（2）字符串、数字：原样输入
（3）布尔值、空、未定义：输出空值
（4）数组：把数组的连接符","替换成空，然后直接输出
let arr = [1,3,4]
ReactDOM.render(<div>{arr}</div>, document.getElementById('root'));
（5）列表渲染：将数组转为虚拟DOM数组
let arr = [1,3,4]
ReactDOM.render(
<ul>
{arr.map(value => <li>{value}</li>)}
</ul>
, document.getElementById('root'));
- JSX属性书写注意点
（1）class属性改为className
（2）style接收的是一个对象
let style = {color:'red',fontSize:18}
ReactDOM.render(
<div style={style}>helloWorld</div>
, document.getElementById('root'));
- JSX注意事项
（1）浏览器不支持JSX，在使用时要用babel编译成js语法，浏览器才能识别
（2）JSX不要写成字符串，否则会被当做文本直接输出
（3）JSX是一个值，在输出时只能有一个顶层标签
ReactDOM.render(
<React.Fragment>
<div style={style}>hello</div>
<div>world</div>
</React.Fragment>
, document.getElementById('root'));
- state的使用
在React中，组件就是一种状态机、组件会根据状态的不同输出不同的UI，需要添加交互时，只需要把交互和状态关联，用户进行交互的时候，UI就会进行不同的渲染
import React,{Component} from "react";
export default class Test extends Component{
constructor(props) {
super(props)
this.state = {
colorState:false
}
}
render() {
let {colorState} = this.state;
return (
<div className={colorState?"redClor":""} onClick={() => {
this.setState({colorState: !colorState})
}}>hello</div>
)
}
}
- 组件间的通信
React是一种单向数据流的设计。也就是说只能从父级向子级一层一层向下传递
（1）父级向子级进行通信：只需要把想传递的数据加在子组件的属性上，然后再子组件内部通过props属性来接收
（2）子组件向父组件传递信息：React是单向数据流，没办法从子组件直接传递信息到父组件，但是可以在父组件上定义好回调函数，把函数传递给子组件，利用回调函数向父组件传递信息
（3）同级组件之间传递：只能在父组件上进行控制，在父组件中定义好相关回调，然后传递给子组件，子组件调用父级的回调进行相关的信息传递
import React,{Component} from "react";
import Content from "./Content";
export default class App extends Component{
constructor(props) {
super(props);
this.state = {
current:''
}
}
changeCurrent = (title)=>{
this.setState({
current:title
})
}
data = [
{
title:'家人',
name:'张三'
},
{
title:'朋友',
name: '王五'
},
{
title: '恋人',
name:'一号'
}
]
render() {
let {current} = this.state
return(
<div>
<div>当前点击的对象title是 {current}</div>
{
this.data.map(obj => <Content data={obj} changeCurrent={(title)=>{
this.changeCurrent(title)
}} current={current}> </Content>)
}
</div>
)
}
}
import React,{Component} from "react";
export default class Content extends Component {
constructor(props) {
super(props);
this.state = {
title:props.data.title,
name:props.data.name
}
}
render() {
let {title, name} = this.state;
let {changeCurrent, current} = this.props;
return (
<div className={current===title?'redClor':''}>
<h1 onClick={() => {
changeCurrent(title);
}}>{title}</h1>
<div>{name}</div>
</div>
)
}
}
- 函数式组件、Hooks
常用Hooks
（1）useState
useState hook可以帮助开发者在函数式组件中使用state，调用该方法时传入state的初始值，该方法会返回一个数组，数组的第0位是state的具体值，第1位是修改该state的方法，同类组件的setState方法一样，调用该方法会更新state，然后引起视图更新
注意事项：
1、usetState返回的setState方法同类组件的setState一样，是一个异步方法，需要组件更新之后state的值才会变成新值
2、同一个组件可以用使用useState创建多个state
import React,{useState} from "react";
export default function HookTest() {
const [name,setName] = useState('张三')
const [age,setAge] = useState(10)
return <div>
<p>{name}</p>
<p>{age}</p>
<button onClick={() => {
setName(name + ' test')
}}></button>
<button onClick={() => {
setAge(age + 1)
}}></button>
</div>
}
（2）useRef
useRef可以看成是createRef的Hook版，使用时先把ref存入变量，然后变量和DOM节点绑定，使用时通过ref的current属性来获取DOM节点
useRef除了用来绑定DOM节点外，还用来保存跨渲染周期的数据，也就是获取组件渲染前的数据，具体使用会搭配useEffect一起使用
import React,{useRef} from "react";
export default function RefTest() {
const refObj = useRef();
return (
<div>
<input ref={refObj}/>
<button onClick={() => {
console.log(refObj.current.value)
}}></button>
</div>
)
}
（3）useEffect
useEffcet相当于componentDidMount、componentDidUpdate、componentWillUnmount的集合体。
useEffect包括两个参数：执行时的回调函数和依赖参数，并且回调函数还有一个返回函数。
依赖参数：本身是一个数组，在数组中放入要依赖的数据，当这些数据有更新时，就会执行回调函数。
如果我们单纯的只想要在挂载后、更新后、卸载前其中之一的阶段执行，可以参考如下：
1、componentDidMount。如果只想要在挂载后执行，可以把依赖参数置位空，这样在更新时就不会执行该回调函数
2、componentWillUnmount。如果只想要在卸载前执行，同样把依赖参数置位空，该回调函数就会在卸载前执行
3、componentDidUpdate。只检测更新相对比较麻烦，需要区分更新还是挂载，需要检测依赖数据和初始值是否一致，如果当前的数据和上一次数据保持一致说明是挂载阶段。
这里可以借助useRef，ref可以用来和数据绑定，数据更新时ref不会自动更新，需要手动进行更新
import React,{useState,useEffect} from "react";
export default function EffectTest(props) {
const [num,setNum] = useState(1)
useEffect(() => {
console.log('组件挂载或更新'+ num)
return () => {
console.log('组件即将更新或即将卸载' + num)
}
},[num])
return (<div>
<p>{num}</p>
<button onClick={()=>{
setNum(num+1)
}}></button>
</div>)
}
import React,{useState,useEffect,useRef} from "react";
export default function EffectTest(props) {
const [num,setNum] = useState(1)
let preNum = useRef(num)
useEffect(() => {
if (num != preNum.current) {
console.log('组件更新' + num)
preNum.current = num;
}
},[num])
return (<div>
<p>{num}</p>
<button onClick={()=>{
setNum(num+1)
}}></button>
</div>)
}
自动化构建react
npm i -g create-react-app
create-react-app ‘项目名’
npm start 启动
可以看到 安装的 react ，react-dom react-scriipts
安装完成后查看package.json //依赖 配置文件 命令
.lock 依赖版本锁定文件（del）
进入src 文件 App.js 渲染到了public的index的 root 容器上通过 index.js的接受 相当于（入口文件）
低配依赖
npm i react@15.6 react-dom@15.6 react-router@2.8 jquery -D
高配依赖
npm i react-router reat-router-dom jquery -D
在react中循环渲染数据、添加点击事件
假设现在我们有一个这样的数组：list: [‘张三’,‘李四’,‘王五’]，在react中可以用数组的map方法
import React from 'react'
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
list: ['张三','李四','王五'],
}
}
render() {
return (
<div>
<ul>
{}
{
this.state.list.map((item,index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
}
export default TodoList
添加点击事件
想要获取我点击的li里面的数据怎么搞呢，现在就要给这个元素添加点击事件了，react中有自己的语法规范，添加点击事件是这样的：onClick={ this.xxxxx }
import React from 'react'
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
list: ['张三','李四','王五']
}
this.btnClick = this.btnClick.bind(this)
}
btnClick(){
}
btnClick = () => {
}
render() {
return (
<div className="main-container">
<ul>
{}
{
this.state.list.map((item,index) => {
return <li key={index} onClick={this.btnClick(index)}>{item}</li>
return <li key={index} onClick={this.btnClick.bind(this,index)}>{item}</li>
return <li key={index} onClick={() => this.btnClick(index)}>{item}</li>
})
}
</ul>
</div>
)
}
}
export default TodoList
js中bind、call、apply都能改变this指向，区别就是bind不会立即调用，而call、apply会立即调用前面的那个函数
bind的第一个参数用来修改this指向，后面所有的参数都会用来当作调用前面函数时候的参数传递进去
<input type="button" value="点我一下" onClick={this.clickMe.bind(this,'我的天','哈哈哈','你是谁')} />
clickMe(arg1,arg2){
console.log(arg1,arg2)
}
|