Shulou(Shulou.com)06/02 Report--

This article shows you what the principle of React Props is, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Props understanding

Props is the most important means of communication for React components.

Props: for child components written in a React application, the properties and methods bound to their tags by the parent component will eventually be passed to them by props.

1) props can be:

① props renders the data source as a subcomponent.

② props acts as a callback function to notify the parent component.

③ props is passed as a simple component.

④ props as a rendering function.

The difference between ⑤ render props and ④ is on the children attribute.

⑥ render component slot components.

/ * children components * / function ChidrenComponent () {return In this chapter, let's learn about react props!} / * props accept processing * / 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] / * for child components How are different props handled * / return {renderFunction ()} {mes} {renderName ()} {renderComponent} say ()} > change content}} / * props definition binding * / class Index extends React.Component {state= {mes: "hello React "} node = null say= () = > this.setState ({mes:'let us learn realms'}) render () {return my name is alien} / / ④ props as a rendering function > {() = > hello World} {/ * ⑤ render props * /} {/ * ⑥ render component * /}} 2) props acts as a role in React (3 angles):

① component level:

Father to son: props and son to Father: props's callback

Render the view container as a props

② update mechanism

In the fiber reconciliation phase, diff can be said to be the updated driver of React, and props can be used as an important criterion for whether the component is updated or not.

(PureComponent, memo and other performance optimization schemes)

③ slot layer

The slot in the closed label of the component, converted to the chidren attribute

3) listen for props changes:

Class component: componentWillReceiveProps (obsolete) componentWillReceiveProps (new) function component: useEffect (initialization will be performed once by default) props chidren mode

① props slot Assembly

In the Container component, the Chidren component is accessed through the props.children property, which is the React element object.

Function:

You can control whether Chidren renders or not as needed.

Container can enhance the props with React.cloneElement (mixed with the new props) or modify the child elements of the Chidren.

② render props mode

{(ContainerProps) = >}-Container component: function Container (props) {const ContainerProps = {name: 'alien' Mes:'let us learn react'} return props.children (ContainerProps)}

Controls whether Chidren is rendered or not as needed. You can pass the props that needs to be passed to Children directly to the execution function children through function arguments.

Operate props1, abstract props

For passing props across levels, it is generally not necessary to specify an attribute in the props, but to pass in or pull the props directly into or out of the subcomponents.

1) mix with props

Mix an attribute into the parent component props and pass it to the child component

Function Son (props) {console.log (props) return hello,world} function Father (props) {const fatherProps= {mes:'let us learn React!'} return} function Index () {const indexProps = {name:'alien', age:'28',} return} 2) extract props

Extract an attribute from the parent component props and pass it to the child component

Function Son (props) {console.log (props) return hello,world} function Father (props) {const {age,...fatherProps} = props return} function Index () {const indexProps = {age:'28', mes:'let us learn React!'} return} 2, injection props1) explicit injection of props

You can see the props bound in the tag visually.

Function Son (props) {console.log (props) return hello,world} function Father (props) {const fatherProps= {mes:'let us learn React!'} return} function Index () {const indexProps = {name:'alien', age:'28',} return} 2) implicitly inject props

Generally, props.chidren clones are mixed with new props through React.cloneElement.

Function Son (props) {console.log (props) / / {name: "alien", age: "28", mes: "let us learn React!"} return hello,world} function Father (prop) {return React.cloneElement (prop.children, {mes:'let us learn React!'})} function Index () {return} what is the principle of React Props? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.