React核心原理与实际开发
学习目标
React是啥？
官方定义：将前端请求获取到的数据渲染为HTML视图的JavaScript库。
一、React入门
1、React项目创建
直接创建react，使用初始化会创建package.json
npm init -y
再安装
2、React基本使用
使用纯JS创建ReactDOM（元素）
React.createElement()方法使用不是很灵活，知道就好；
ReactDOM.render()方法渲染react元素很重要！！！使用起来友好。
3、React脚手架搭建完整项目框架
使用react脚手架初始化项目，避免了使用
2、类方式
2、组件三大属性
1、state
理解
（1）state值是对象（可包含多个key-value）
（2）组件被称为”状态机“，通过更新组件来更新对应的页面
强烈注意
1、组件中render方法中的this指向为组件实例对象
2、组件自定义方法中this为undefined，咋解决？
a、强制绑定this：通过函数bind()
b、使用箭头函数
3、状态数据，不可直接更新，要使用setState
应用场景：state也就是状态变化，多用于触发事件等
标准版本及详解->
Document
简化版本--企业开发
// 1、创建组件
class Weather extends React.Component{
// 初始化状态
state = { isHot: false }
// 触发事件
render(){
const {isHot} = this.state
return 今天天气很{this.state.isHot ? "炎热" : "凉爽"}
}
// 自定义方法--要用赋值语句+箭头函数
changeWeather = () =>{
const isHot = this.state.isHot;
this.setState({isHot:!isHot})
}
}
！！！精华：此处的changeWeather就是组件Weather的一个变量，被赋值一个函数，那么在this.changeWeather拿到的就是一个函数传给onClick，而不是直接被调用返回数值给onClick2、props
官方定义为 --> 单向数据流值
作用：接收外部数据（这是别人给的，只读！）
传递数据： 通过给组件标签添加属性
接收数据：函数组件通过 参数 props接收数据，类组件通过 this.props接收数据
1、对标签限制 --类型、必要性
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name:PropTypes.string.isRequired,//限制name必传，且为字符串
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func//限制speak必须是函数
}
//指定默认标签属性值
Person.defaultProps = {
sex:'不男不女',
age:18
}2、向组件传递数据 -- props批量传递
// 批量传递props
//注意： 冒号： 表示键值对 用于对象中 等于号= 用于给常量赋值
const p = {name:"23",age:23,sex:"男"}
ReactDOM.render(3、简写完整版
class Person extends React.Component{
// 对标签属性进行类型、必要性的限制
static propTypes = {
name:PropTypes.string.isRequired,//限制name必传，且为字符串
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func//限制speak必须是函数
}
//指定默认标签属性值
static defaultProps = {
sex:'不男不女',
age:18
}
state = {}
render(){
const{name,age,sex} = this.props
// 获取到的props数据流是只读的
// this.props.name = 'jack' 会报错
return(
- {name}
- {sex}
- {age}
)
}
// 对组件标签进行限制
}
ReactDOM.render(, document.getElementById('test1'))
ReactDOM.render( 实现组件通信方法 -- 定义为父子组件
将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。
子组件调用父组件的方法
（1）子组件要拿到父组件的属性，需要通过 this.props 方法。
（2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上， 子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。
父组件传参数、函数，子组件接收实例
import React, { Component, Fragment } from "react";
//React的props传参
// 父组件
class App extends Component {
render() {
return (
);
}
bianshen() {
return "变身超级赛亚人";
}
}
// 子组件
class Child extends Component {
render() {
return (
{this.props.name}
{this.props.jineng()}
);
}
}
export default App;父组件调用子组件的方法 在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样，子组件被设置为 ref 之后（比如 ref=“xxx”）。父组件便可以通过 this.refs.xxx 来获取到子组件了。
3、ref
组件内的标签定义ref标识自己
字符串形式 -- 简单好用但逐渐过时
回调形式 -- 麻烦
createRef -- 官方最新
3、事件处理
将发生的事件作为参数
class Demo extends React.Component{
// React.createRef调用后返回一个容器 可存储被ref标识的节点 但只能一个
myRef = React.createRef()
myRef2 = React.createRef()
// 展示左侧输入框的数据
showData = ()=>{
alert(this.myRef.current.value)
}
// 展示右侧输入框的数据
showData2 = (event)=>{
alert(event.target.value)
}
render(){
return(
{/*发生事件的元素刚好是要操作的元素，就可省略ref*/}
)
}
// 事件处理中，点击第二个输入文本就是一个未指定的事件，在showData2函数中将点击事件作为参数获取值显示
}
ReactDOM.render(4、React生命周期
旧版本
组件的钩子中只有三个钩子常用
1、初始化阶段：由ReactDOM.render（）出发 -- 初次渲染
1、constructor（）
2、componentWillMount()
3、render()
4、componentDidMount() ====》常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2、更新阶段：有组件内部this.setState()或父组件render触发
1、componentWillReceiveProps（）
2、shouldComponentUpdate()
3、componentWillUpdate()
4、render() 必用
5、componentDidUpdate()
3、卸载阶段：由ReactDOM.unmountComponentAtNode()触发
1、componentWillUnmount() ===》常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
基本钩子实例