这样的形式,最终会被编译成React.createElement(ChildRender, null)
它们执行后返回的是包含props的一个对象(ReactElement)export function createElement(type, config, children) {
// 重点在这里,重新声明了props属性的引用
const props = {};
...
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
也就是说,返回结果是一个ReactElement全新的引用,而它里面的props也是一个全新的对象,这也就意味着的props变了,所以它会重新渲染。
还有一种方式可以避免重新渲染import React,{useState,useCallback} from 'react'
// import ChildRender from './componment/child'
const ChildRender = () =>{
return (
)
}
const App = props => {
const [count,setCount] = useState(0,)
return(
this is my app
{count}
setCount(count +1)}>点我
// 替换成如下的方式
{props.children}
)
}
export default App
App使用的地方:
这是由于
ChildRender在App中是以props.children的形式体现出来的。这个props是App的props,而App渲染时,其props并未变化,相应的props.children,它是ChildRender的jsx形式,也没有变化,也就是说ChildRender的props同样没有变化,所以不会重新渲染。