Article directory
1. Component passing value
1.1 Overview
Passing values from a parent component to a child component (under self-direction) can be done directly props.
<List ref={
this.ref} {
...this.state.list[0]}/>
The child component transfers values to the parent component in a bottom-up manner. This kind of operation does not support direct operation inside React. We can choose to use function props to complete the requirements.
By passing a function and parameters into the child component introduced by the parent component, the child component triggers the function to change the parameters to complete the data update.
1.2 Subcomponents
const List = React.forwardRef((props,ref)=>{
const userNameClickFun=(name)=>{
props.getUserName(name)
}
return <div ref={
ref} className="list">
<div onClick={
()=>{
userNameClickFun(props.name)}} className="left"></div>
<div className="right">
<div className="info">{
props.name}</div>
<div className="text">{
props.text}</div>
</div>
</div>
})
1.3 Parent component
getUserNameFun(name){
console.log(name)
}
render(){
return <div className="comment-box">
{
this.state.list.map(v=><List getUserName={
this.getUserNameFun} key={
v.id} {
...v}/>)
}
<div className="inp">
<textarea ref="inpDom" onChange={
(e)=>{
this.getText(e)}}></textarea>
<div>
<button onClick={
()=>{
this.subFun()}}>提交评论</button>
</div>
</div>
</div>
}
2. High-order components
If a function operates on other functions, takes other functions as parameters, or returns a function as a return value, it is called a higher-order function. Higher-order components are similar to higher-order functions, receiving a React component as input and outputting a new React component. High-order components make code more reusable, logical and abstract. You can hijack the render method and control props and state.
Simply put, a higher-order component is just a React component that wraps another React component .
const NavTitle=(props)=>{
return props.type===1?<h1>{
props.title}</h1>: <h2>{
props.title}</h2>
}
const Nav = (props)=>{
if(props.type!=1&&props.type!=2){
return <p>{
props.title}</p>
}else{
let newPro={
...props,
title:'高阶标题'+props.title
}
return <NavTitle {
...newPro}/>
}
}
3. Hook
Most components declared using functions are stateless components, and presentational components are generally stateless components.
Hook is a method that provides function components for state management. Hooks can only be called in React function components.
3.1 State Hook
By useStatedeclaring a variable with a value of 0, you can also get a method that can change the current variable. setCountThe count modified by the method can update the page at the same time. stateThe sum of equivalent Class componentssetState
function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
3.2 Effect Hook
The simple understanding of useEffect is to listen to the data in the function component. is componentDidMount, componentDidUpdateand componentWillUnmountthe combination of these three functions
useEffect(() => {
document.title = `You clicked ${
count} times`;
});