react在组件内插入标签_react 函数组件里面自定义组件用标签的形式去渲染，为什么会导致重复渲染...

这样的形式，最终会被编译成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 (

这是子组件11111

)

}

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同样没有变化，所以不会重新渲染。