官网:https://zh-hans./ 一、创建项目 (第一行的 npx create-react-app my-app
cd my-app
npm start
二、文件结构
三、组件创建 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、挂载阶段
2、更新阶段
3、卸载阶段
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)
}
}
|
|