Chapter 4 components & components props

1. Transfer of components and component values
Before that, we introduced JSX, React elements, and element rendering. Next, we will enter React page composition key components.

At this time, we can expand the scope of React elements, which can be divided into native html element tags and user-defined component elements.

User defined components are divided into function components and class components of ES6. In the process of React parsing, all tags that start with small write will be parsed with html native tags. If user-defined component elements start with lowercase, the page will report an error.

When using a custom component, you need to pass parameters to the component and use attributes to pass them. All attributes will be encapsulated in a props object for forwarding. Get it from this.props.attrName inside the calss component. In the function component, it is obtained by the function unique parameter. As follows:

import React from 'react';
import ReactDOM from 'react-dom';

//Elements: native html tags, custom component elements

//Native html tags
const htmlDom = <h1>Hello,zhangsan!</h1>;

//Function component
function WelCome (props){
	return <h1>Hello,{props.name}!</h1>;
}

//Equivalent ES6 class component
class WelCome2 extends React.Component{
	render(){
		return <h1>Hello,{this.props.name}</h1>
	}
}

//Reactdom. Render (< welcome name = "Zhang San" / >, document. Getelementbyid ('root '));
//Equivalent effect
ReactDOM.render(<WelCome2 name="Zhang San" />,document.getElementById('root'));

2. Combined components

When we write a page, the content of the page is often complex and nested, and the layout is complex, and even a lot of code is repeated. Therefore, React can split our currently more complex pages into different components according to different modules, and the code functions of the same structure can be merged into one component. We can use the inner and outer nesting or combination of components to complete the implementation of a large complex page.

For example, in a message board page, there are different message lists for different users. Each message contains the same elements as the user's image, name, message content and time. We can gradually extract them into small components and show them.

No components before extraction

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Extracted widget

function Author(props){
	return (
	        <img className="Avatar"
	          src={props.author.avatarUrl}
	          alt={props.author.name}
	        />
	);
}

function User(props){
	return (
		  <div className="UserInfo">
	        <Author  author={props.author}/>
			<div className="UserInfo-name">
	          {props.author.name}
	        </div>
	      </div>
	);
}

function Comment(props) {
	return (
	    <div className="Comment">
	      <User  author={props.author} />
	      <div className="Comment-text">
	        {props.text}
	      </div>
	      <div className="Comment-date">
	        {props.date}
	      </div>
	    </div>
	);
}


ReactDOM.render(<Comment text="Message content" date="2020-03-16" author={{name:"zhangsan",avatarUrl:"xxx"}} />,document.getElementById('root'));

The effect is the same.

3. The readability of props

We cannot modify the pass parameter value of props in the pass of component value. It's just an agreement. If we need to update the data inside the component, the next chapter will talk about the state value state inside the component to update the content of the component;

 

170 original articles published, praised 173, visited 970000+
His message board follow

Tags: React

Posted on Mon, 16 Mar 2020 06:26:07 -0700 by broann