react是什么
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
组件定义
class组件
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
直接写html这部分属于jsx，它允许 HTML 与 JavaScript 的混写;现在使用babel/plugin-transform-react-jsx 编译为以下形式：
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
函数组件
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
通过 Props 传递数据
//子组件
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
//父组件
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
}
事件也是通过props传递的，比如传入回调
//子组件
import react from "react"
export default class Child extends react.Component {
constructor(props){
super(props)
this.state = {
name: props.name
}
}
static getDerivedStateFromProps(nextProps, prevState){
const { name } = nextProps
if (name !== prevState.name) {
return {name}
}
return null
}
render(){
return(
<div>
child name: {this.state.name}
<input type="button" value="修改父组件name" onClick={() => this.props.changeParentName('动次打次')}></input>
</div>
)
}
}
// 父组件
import Child from './Child'
import React, { useEffect } from 'react'
export default function Parent(props){
const [name, setName] = React.useState(props.name);
const handleChangeText = (event)=> {
setName(event.target.value)
}
useEffect(() => {
console.log('eee')
return () => {
console.log('bbbb')
}
})
const changeParentName = (name) => {
setName(name)
}
return(
<div>
<div>parent
name:<input type="text" value={name} onChange={ handleChangeText }></input>
</div>
<div style={{'paddingLeft': '20px'}}>
<Child name={name} changeParentName={(pName) => {changeParentName(pName)}}></Child>
</div>
</div>
)
}
事件
React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:
- React 事件绑定属性的命名采用驼峰式写法，而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
<button onClick={activateLasers}>
激活按钮
</button>
动态加载组件
return (
<div>
<div>parent
name:<input type="text" value={name} onChange={ handleChangeText }></input>
</div>
<div style={{'paddingLeft': '20px'}}>
<Child name={name} changeParentName={(pName) => {changeParentName(pName)}}></Child>
</div>
<div>
<button onClick={ () => setShowCycle(!showCycle)}>{showCycle ? '隐藏' : '显示'}</button>
</div>
{showCycle ? <LifeCycle></LifeCycle> : ''}
</div>
)
生命周期
image.png
每个组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。你可以使用此生命周期图谱作为速查表。在下述列表中，常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见。
挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
constructor()-
static getDerivedStateFromProps()
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。 render()componentDidMount()
更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
卸载
当组件从 DOM 中移除时会调用如下方法：
会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。
网友评论