1. 컴포넌트 전달 값
1.1 개요
부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 것은(self-direction 하에서) 직접 수행할 수 있습니다 props.
<List ref={
this.ref} {
...this.state.list[0]}/>
하위 컴포넌트는 상향식으로 상위 컴포넌트에 값을 전달합니다. 이런 종류의 작업은 React 내부에서 직접 작업을 지원하지 않습니다. 요구 사항을 완료하기 위해 함수 props를 사용하도록 선택할 수 있습니다.
상위 구성 요소에 의해 도입된 하위 구성 요소에 함수 및 매개 변수를 전달하면 하위 구성 요소는 매개 변수를 변경하는 함수를 트리거하여 데이터 업데이트를 완료합니다.
1.2 하위 구성요소
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 상위 구성요소
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. 고차 부품
함수가 다른 함수에 대해 작동하거나, 다른 함수를 매개변수로 사용하거나, 함수를 반환 값으로 반환하는 경우 이를 고차 함수라고 합니다. 고차 구성 요소는 고차 함수와 유사하며 React 구성 요소를 입력으로 받고 새로운 React 구성 요소를 출력합니다. 고차 구성 요소는 코드를 더 재사용 가능하고 논리적이며 추상적으로 만듭니다. 렌더링 방법을 하이재킹하고 소품과 상태를 제어할 수 있습니다.
간단히 말해서, 고차 컴포넌트는 다른 React 컴포넌트를 래핑하는 React 컴포넌트 일 뿐입니다 .
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은 상태 관리를 위한 함수 컴포넌트를 제공하는 방식으로, Hook은 React 함수 컴포넌트 에서만 호출할 수 있습니다 .
3.1 상태 후크
값이 0인 변수를 선언 하면 useState현재 변수를 변경할 수 있는 메소드도 얻을 수 있으며, setCount해당 메소드에 의해 수정된 개수도 동시에 페이지에 업데이트될 수 있습니다. 동등한 클래스 구성요소의 state합setState
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 효과 후크
useEffect에 대한 간단한 이해는 함수 구성 요소의 데이터를 듣는 것입니다. 이고 componentDidMount, 이 세 가지 기능 componentDidUpdate의 componentWillUnmount조합
useEffect(() => {
document.title = `You clicked ${
count} times`;
});