React开发入门
官网：https://zh-hans.reactjs.org/
一、创建项目
（第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具）
npx create-react-app my-app
cd my-app
npm start
二、文件结构
- node_modules -d 存放 第三方下载的 依赖的包
- public -d 资源目录
- favicon.ico - 左上角的图标
- index.html - 项目首页模板
- manifast.json - 如果是一个 app 定义 app 的图标 网址 主题颜色等
- src -d 项目所有的源代码
- index.js - 整个程序的入口 (react 的理念 all in js)
- index.css - 初始化样式
- App.js - 项目
- App.test.js - 自动化测试文件
- App.css - 项目的样式
- logo.svg - 首页 logo
- serviceWorker.js - 将网页存储在浏览器内 如果突然断网了 可以继续访问该网页 (PWD progressive web application 借助写来的 网页 用来做 app)
- .gitignore - 用 git 管理代码 不想 传到 git 上 可以使用
- package.json - node 的包文件 和项目介绍 （ 命令行 命令 ） 等
- README.md - 项目的说明文件
- yarn.lock - 依赖的安装包 （一般不用动）
三、组件创建
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 1、函数组件，StaticBox自定义的组件名，首字母大写
function StaticBox(props) {
// class需写为className
return (
<div className="blackBorder">
<h1>子组件1</h1>
</div>
)
}
// 2、class组件，需要继承 React.Component
class ChildCom extends React.Component {
// constructor，如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
constructor(props) {
// super(props)，调用继承的Component的构造函数
super(props)
}
// render() 方法是 class 组件中唯一必须实现的方法
render() {
return (
<div className="redBorder">
{/* jsx中的注释方式 */}
<h1>子组件2</h1>
</div>
)
}
}
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="blueBorder">
<h1 className="red">父组件</h1>
{/* 组件调用 */}
<StaticBox></StaticBox>
<ChildCom></ChildCom>
</div>
)
}
}
// 渲染：ReactDOM.render(组件，节点)，ReactDOM.render(element, container[, callback])
ReactDOM.render(<FatherCom />, document.getElementById('root'))
四、组件传参
function StaticBox(props) {
return (
<div className="blackBorder">
<h1>子组件1</h1>
{/* 接收的父组件参数 */}
<div>父传子参数：{props.data}</div>
</div>
)
}
class ChildCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="redBorder">
<h1>子组件2</h1>
<button onClick={this.sendData}>点击向父组件传参</button>
</div>
)
}
sendData = () => {
// 子组件向父组件传参步骤1，调用父组件自定义方法更新数据
this.props.sendFromChild('子组件参数')
}
}
class FatherCom extends React.Component {
constructor(props) {
super(props)
// state，数据管理
this.state = {
value: '父组件参数'
}
}
render() {
return (
<div className="blueBorder">
<h1 className="red">父组件</h1>
<span>子组件2参数:{this.state.send}</span>
{/* 父组件向子组件传参，在组件上添加属性即可 */}
<StaticBox data={this.state.value}></StaticBox>
{/* 子组件向父组件传参步骤2，父组件自定义方法绑定事件更新数据 */}
<ChildCom sendFromChild={this.sendData}></ChildCom>
</div>
)
}
// methods
sendData = (data) => {
// setState，更新state数据
this.setState({
send: data
})
}
}
五、插槽
class ChildCom extends React.Component {
constructor(props) {
super(props)
console.log(this.props) // this.props.children 为插槽节点的list
}
render() {
// props.children每个item的中可以获取节点属性和内容
let IndexCom = this.props.children[0].props['data-index'] == 2 ? this.props.children[0] : this.props.children[1]
return (
<div className="redBorder">
<h1>子组件2</h1>
<div>组件插槽</div>
{this.props.children}
<div>具名插槽</div>
{IndexCom}
</div>
)
}
}
class FatherCom extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="blueBorder">
<h1 className="red">父组件</h1>
<ChildCom>
<div data-index="1">插槽1</div>
<div data-index="2">插槽2</div>
</ChildCom>
</div>
)
}
}
六、生命周期
原文：https://blog.csdn.net/LQ271524/article/details/114371811
当组件第一次被渲染到 DOM 中的时候，被称为“挂载（mount）”。
同时，当 DOM 中组件被删除的时候，被称为“卸载（unmount）”。
目前React 16.8+的生命周期分为三个阶段，分别是挂在阶段、更新阶段、卸载阶段
1、挂载阶段
-
- constructor:构造函数，初始化state对象或者给自定义方法绑定this。
- getDerivedStateFromProps(nextProps,prevState)，这个是静态方法，当我们接收到新的属性想去修改我们state，可以使用getDerivedStateFromProps(新增生命周期)
- render:render函数是纯函数，只返回需要渲染的内容，不应该包含其它业务逻辑。
- componentDidMount:组件挂载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅。
2、更新阶段
-
- getDerivedStateFromProps:此方法在更新挂载阶段都可能会调用
- shouldComponentUpdate(nextProps,nextState)，有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true，我们通常利用此声明周期来优化React程序性能。
- render:更新阶段也会触发此生命周期
- getSnapshotBeforeUpdate(prevProps,prevState)，这个在render方法之后，Update之前调用，有两个参数prevProps,prevState，表示之前的props和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate,如果你不想要返回值，可以返回null,此生命周期必须与componentDidUpdate搭配使用(新增生命周期)。
- componentDidUpdate(prevProps,prevState,snapshot)，该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps,prevState,snapshot，表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate返回的，如果触发某些回调函数时需要用到DOM元素的状态，则将对比或计算过程迁移至getSnapshotBeforeUpdate，然后再componentDidUpdate中统一触发回调或更新状态。
3、卸载阶段
-
- componentWillUnmount:当我们的组件被卸载或者销毁了就回调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作。
class FatherCom extends React.Component {
constructor(props) {
super(props)
// state，数据管理
console.log(1)
}
render() {
console.log(2)
return (
<div className="blueBorder">
<h1 className="red">组件</h1>
</div>
)
}
componentDidMount() {
// componentDidMount组件渲染完毕，生命周期
// 执行顺序，constructor->render->componentDidMount,console结果：1 2 3
console.log(3)
}
}
