React基础总结

1、React工作方式
state—》视图—》修改state—》newState----》新视图
只要对state进行修改，React就会重新渲染视图，大量的DOM操作不会对页面性能有影响，React采用了一种虚拟DOM的核心技术，每一个组件都会生成一个虚拟DOM树，它是以纯对象的方式进行描述的，React会根据虚拟DOM来生成真实的DOM，组件中的数据变化会生成一个新的虚拟DOM，React会对比新旧的虚拟DOM，找出变化点，然后针对变化的节点进行重新渲染，极大提高了重新渲染的性能。

2、React两个核心文件
（1）react.js，比如组件、Hooks、虚拟DOM等都在这个文件中
（2）react-dom.js是对真实DOM的相关操作，如将虚拟DOM渲染到真实的DOM里，或者从真实的DOM中获取节点

3、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(<App/>,document.getElementById('root'));
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'), ()=>{alert('渲染成功')});

（2）unmountComponentAtNode
ReactDOM.unmountComponentAtNode(container)
container：真实DOM节点（将该真实DOM下的组件删除）

4、JSX
展开来说就是JavaScript + XML，看起来很像XML的JavaScript语法扩展。如下，可以直接在js中利用前端的html标签构建视图，jsx本身是一个值，它是一个ReactElement对象，要注意如果直接写一个字符串，它就是一个文本，不会被解析为对象

ReactDOM.render(
<div>
<h1>hello world</h1>
</div>,
document.getElementById('root'));

5、插值表达式：{数据}
使用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]// 输出134
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'));

6、JSX属性书写注意点
（1）class属性改为className
（2）style接收的是一个对象

let style = {color:'red',fontSize:18}
ReactDOM.render(
<div style={style}>helloWorld</div>
, document.getElementById('root'));

7、JSX注意事项
（1）浏览器不支持JSX，在使用时要用babel编译成js语法，浏览器才能识别
（2）JSX不要写成字符串，否则会被当做文本直接输出
（3）JSX是一个值，在输出时只能有一个顶层标签

ReactDOM.render(
<React.Fragment>// react提供的一个容器组件，本身不会在真实的DOM中渲染出来，可以用来作为顶层标签
<div style={style}>hello</div>
<div>world</div>
</React.Fragment>
, document.getElementById('root'));

8、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>
		)
	}
}

9、组件间的通信
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>
			)
		}
	}

12、函数式组件、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>)
}

// componentDidUpdate
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>)
}