一篇文章帶你理解React Props的 原理
props理解
props 是 React 組件通信最重要的手段
props:對於在 React 應用中寫的子組件,父組件綁定在它們標簽裡的 屬性和方法,最終會變成 props 傳遞給它們。
1)props 可以是:
- ① props 作為一個子組件渲染數據源。
- ② props 作為一個通知父組件的回調函數。
- ③ props 作為一個單純的組件傳遞。
- ④ props 作為渲染函數。
- ⑤ render props , 和④的區別是放在瞭 children 屬性上。
- ⑥ render component 插槽組件。
/* children 組件 */ function ChidrenComponent(){ return <div> In this chapter, let's learn about react props ! </div> } /* props 接受處理 */ class PropsComponent extends React.Component{ componentDidMount(){ console.log(this,'_this') } render(){ const { children , mes , renderName , say ,Component } = this.props const renderFunction = children[0] const renderComponent = children[1] /* 對於子組件,不同的props是怎麼被處理 */ return <div> { renderFunction() } { mes } { renderName() } { renderComponent } <Component /> <button onClick={ () => say() } > change content </button> </div> } } /* props 定義綁定 */ class Index extends React.Component{ state={ mes: "hello,React" } node = null say= () => this.setState({ mes:'let us learn React!' }) render(){ return <div> <PropsComponent mes={this.state.mes} // ① props 作為一個渲染數據源 say={ this.say } // ② props 作為一個回調函數 callback Component={ ChidrenComponent } // ③ props 作為一個組件 renderName={ ()=><div> my name is alien </div> } // ④ props 作為渲染函數 > { ()=> <div>hello,world</div> } { /* ⑤render props */ } <ChidrenComponent /> { /* ⑥render component */ } </PropsComponent> </div> } }
2)props在React充當角色(3個角度):
① 組件層級:
- 父傳子:props 和 子傳父:props 的 callback
- 將視圖容器作為 props 進行渲染
② 更新機制
在 fiber 調和階段中,diff 可以說是 React 更新的驅動器,props 可以作為組件是否更新的重要準則
(PureComponent
,memo
等性能優化方案)
③ 插槽層面
組件的閉合標簽裡的插槽,轉化成 chidren 屬性
3)監聽props改變:
類組件: componentWillReceiveProps(廢棄) componentWillReceiveProps(新)函數組件: useEffect (初始化會默認執行一次) props chidren模式
① props 插槽組件
<Container> <Children> </Container>
在 Container 組件中,通過 props.children 屬性訪問到 Chidren 組件,為 React element 對象。
作用:
- 可以根據需要控制 Chidren 是否渲染。
- Container 可以用 React.cloneElement 強化 props (混入新的 props ),或者修改 Chidren 的子元素。
② render props模式
<Container> { (ContainerProps)=> <Children {...ContainerProps} /> } </Container> ———————————————————————————————————————————————————————————————————————————————— Container組件: function Container(props) { const ContainerProps = { name: 'alien', mes:'let us learn react' } return props.children(ContainerProps) }
根據需要控制 Chidren 渲染與否。可以將需要傳給 Children 的 props 直接通過函數參數的方式傳遞給執行函數 children 。
操作 props
1、抽象 props
用於跨層級傳遞 props ,一般不需要具體指出 props 中某個屬性,而是將 props 直接傳入或者是抽離到子組件中。
1)混入 props
給父組件 props 中混入某個屬性,再傳遞給子組件
function Son(props){ console.log(props) return <div> hello,world </div> } function Father(props){ const fatherProps={ mes:'let us learn React !' } return <Son {...props} { ...fatherProps } /> } function Index(){ const indexProps = { name:'alien', age:'28', } return <Father { ...indexProps } /> }
2)抽離 props
從父組件 props 中抽離某個屬性,再傳遞給子組件
function Son(props){ console.log(props) return <div> hello,world </div> } function Father(props){ const { age,...fatherProps } = props return <Son { ...fatherProps } /> } function Index(){ const indexProps = { age:'28', mes:'let us learn React !' } return <Father { ...indexProps } /> }
2、註入 props
1)顯式註入 props
能夠直觀看見標簽中綁定的 props
function Son(props){ console.log(props) return <div> hello,world </div> } function Father(props){ const fatherProps={ mes:'let us learn React !' } return <Son {...props} { ...fatherProps } /> } function Index(){ const indexProps = { name:'alien', age:'28', } return <Father { ...indexProps } /> }
2)隱式註入 props
一般通過 React.cloneElement 對 props.chidren 克隆再混入新的 props
function Son(props){ console.log(props) // {name: "alien", age: "28", mes: "let us learn React !"} return <div> hello,world </div> } function Father(prop){ return React.cloneElement(prop.children,{ mes:'let us learn React !' }) } function Index(){ return <Father> <Son name="alien" age="28" /> </Father> }
總結
1、pros作用、角色
2、props的children(插槽)
3、操作props
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!