编程知识 cdmana.com

Initial react specification, react features, react components and JSX

React

One :React Introduce

website :https://zh-hans.reactjs.org/

The operation of the operation node can no longer be seen

1. characteristic
  • Automated UI State management

  • fictitious DOM

    Use common js Object to describe DOM structure , Because it's not real DOM, So it's called virtual DOM.( Through virtual DOM To change the node , Put the changed virtual DOM And reality DOM Compare , Then update the node )

    benefits : To simplify the DOM operation , Improved performance

  • Component development

    The commonality of componentization and modularity : Can be reused

    difference : Componentization : According to different functions , Different labels are divided into different components ; modularization : Is to achieve code management , Divide a page into multiple modules ;

    Componentization : Different labels are divided into different components , Then put all the components together ( structure , Style and behavior )( Generally, componentization and modularization should be used together , Because modularity can better realize componentization ), Componentization is to componentize all functions , Each has its own structure , Style and behavior , You can call this component directly when using

  • It's all in Javascript In the definition of UI

  • JSX

    1. It can be used inside html label

  • It's just MVC In the architecture v

    Model View control

  • One way data flow

    Data transfer has only one direction ( Parent component —> Child components ), Can trace the source

    why: If you set it to two-way transmission , The performance is going to be lower , And it's difficult to trace the source

Two : Usage method

createElwment(" Tag name "," attribute "," Content of the label ")

Method 1: Direct write
  1. Introduce online React plug-in unit

     <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    
  2. Case study

     // The way of writing 1: direct writing 
    ReactDOM.render(React.createElement("h1", {
           title: "hello" }, "hello word"), document.getElementById("root"));
    
Method 2: Write in combination
 // The way of writing 2: Write in combination 
let HElement = React.createElement("h1", {
     title: "hello" }, "hello word");
let pElement = React.createElement("p", null, " The paragraph 1");
let RootElement = React.createElement("div", null,HElement,pElement);
ReactDOM.render(RootElement, document.getElementById("root"));
Method 3:JSX grammar

JSX It is a set defined in technology XML grammar , Word order in JS Internal image compilation HTML Write components like code , Finally, it will be compiled into Javascript

React Official recommendation JSX To write components

1. standard
  1. Components can be nested ;

  2. Components can be used as labels ;

  3. JSX Rules and XML equally

  4. The label must be dyed closed <RootElement />

  5. attribute

    • Most attributes and html The label is consistent

    • Two special :for=>htmlFor;class->className

      <label htmlFor="p1"> Content </label>
      <p className="p1" id="p1"> The paragraph 1</p>
      
    • You can customize the properties

  6. Curly braces {}

    • If you reference a variable, you must use curly braces
    • It can perform operations , But you can't use conditional statements and loop statements
  7. notes {/**/}

2. usage
  1. introduce JSX Of babel

    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    
  2. Case study

    Be careful :1. Writing script When , Remember to add type="text/babel"

    ​ 2.return You can't wrap lines and things in the back , Otherwise, it will report a mistake , If you want to wrap , When you want to wrap a line, add a ()

    ​ 3.{}3.1: Syntax for referencing variables , You can't join... Outside "";3.2: It can perform operations , But you can't use conditional statements and loop statements

    <script type="text/babel">
        let H1Element = function(){
          
                    return <h1>hello React</h1>
                }
                let PElement = function(){
          
                    return <div>
                        <label htmlFor="p1"> Content </label>
                        <p className="p1" id="p1"> The paragraph 1</p>
                    </div>
                }
                let RootElement = function(){
          
                    return <div>
                        <H1Element></H1Element>
                        <PElement></PElement>
                        </div>
                }
                ReactDOM.render(<RootElement />,document.getElementById("root"));
     </script>
    
3. loop

Loop through arrays

{}1. Syntax for referencing variables , You can't join... Outside "";2: It can perform operations , Can call methods , But you can't use conditional statements, circular words and judgment statements

 let H1Element = function(){
    
            return <h1>hello React</h1>
        }
        let PElement = function(){
    
            let Pcontent = " I'm a paragraph 1";
            let className = "p1"
            return <div>
                    <label htmlFor="p1"> Content </label>
                    <p className={
    className} id="p1">{
    Pcontent}</p>
                </div>
        }
        let RootElement = function(){
    
           let arr = [1,2,3,4,5,6];
            // use Array Create an array , How many times do you need , Just write as much , Fill the inside with 0 The number of ( Because numbers are useless in it anyway )
            let ary = new Array(10).fill(0);
            return <div>
                <H1Element></H1Element>
                {
    ary.map(()=><PElement></PElement>)}
                </div>
        }
        ReactDOM.render(<RootElement />,document.getElementById("root"));
4.JSX The comments in

{/* notes */}

function render(){
    
	return <p>
		{
    /* This is the comment */}
	</p>
}

3、 ... and :React Components in

Concept : Components are written React The basis of application , An application is a combination of large and small components

Component classification :
  1. Stateless component - Definition of ordinary function , No state , There is no life cycle , Enough to optimize performance

    function Top() {
          
                return <div></div>
            }
    
     let PElement = function(){
          
                let Pcontent = " I'm a paragraph 1";
                let className = "p1"
                return <div>
                        <label htmlFor="p1"> Content </label>
                        <p className={
          className} id="p1">{
          Pcontent}</p>
                    </div>
            }
    
  2. Stateful component : recommend ES6 Grammar definition ,React An instance is created internally , And have a complete life cycle ; also Hook How to write it

    class PElement extends React.Component {
          
                render() {
          
                    return <div></div>
                }
            }
    
     class PElement extends React.Component {
          
                render() {
          
                    let Pcontent = " I'm a paragraph 1";
                    let className = "p1"
                    return <div>
                        <label htmlFor="p1"> Content </label>
                        <p className={
          className} id="p1">{
          Pcontent}</p>
                    </div>
                }
            }
    

Four : Specification of components

  1. Every component must have a return value , If the return value is another component, there must be and only one root element
  2. If you return null or false, At compile time, it will be replaced with <noscript>

5、 ... and : Parameter transfer of components

1. In applications composed of components , The relationship between components is mainly parent and child , Be similar to HTML label

2. Data can be passed between components , But it can only be one-way , Passed from parent to child

3. Objects used props(1): Pass... Through custom properties (2): Pass through text content -children

Only one-way data flow can be passed ( Parent component passing child component ): Numbers , object , style

  1. Statelessness is gradually transferred to

    Can pass attribute value , The parent component can pass its custom name to the child component props. Property name

    <h1 title={
          props.myTitle}>hello React</h1>
    

    Pass the contents of the label with props.children

    <p className={
          className} id="p1">{
          props.children}</p>
    
    let H1Element = function(props){
          
        return <h1 title={
          props.myTitle}>hello React</h1>
    }
    let PElement = function(props){
          
        let className = "p1"
        return <div>
            <label htmlFor="p1"> Content </label>
        <p className={
          className} id="p1">{
          props.children}</p>
        </div>
    }
    let RootElement = function(){
          
        let arr = [" The paragraph 1"," The paragraph 2"," The paragraph 3"," The paragraph 4"];
        return <div>
            <H1Element myTitle=" title 1"></H1Element>
        	{
          arr.map((item)=><PElement>{
          item}</PElement>)}
                 </div>
    }
    ReactDOM.render(<RootElement />,document.getElementById("root"));
    
  2. Stateful component transfer parameters ( use this)

    class H1Element extends React.Component {
          
        render(props) {
          
        	return <h1 title={
          this.props.mytitle}>hello React</h1>
        }
    }
    
  3. Set the style

    Method 1:

     let H1Element = function(props){
          
         return <h1 title={
          props.myTitle} style={
          {
          color:"red",backgroundColor:"yellow"}} >hello React</h1>
    }
    

    Method 2:

    let H1Element = function(props){
          
        let style = {
          color:"red",backgroundColor:"yellow"};
        return <h1 title={
          props.myTitle} style={
          style} >hello React</h1>
    }
    

    Method 3: Set the color separately

    let PElement = function(props){
          
        let Pcontent = " I'm a paragraph 1";
        let className = "p1";
        let style = {
          
            color:"red",
            backgroundColor:"yellow",
            ...props.style
        };
        return <div>
            <label htmlFor="p1"> Content </label>
        <p className={
          className} id="p1" style={
          style}>{
          props.children}</p>
        </div>
    }
    let RootElement = function(){
          
        let arr = [
            {
          
                letter:" The paragraph 1",
                style:{
          
                    color:"blue",
                    backgroundColor:"green"
                }},
            {
          
                letter:" The paragraph 2",
                style:{
          
                    color:"blue",
                    backgroundColor:"skyblue"
                }},
        ]
        return <div>
            <H1Element myTitle=" title 1"></H1Element>
        {
          arr.map((item)=><PElement style={
          item.style}>{
          item.letter}</PElement>)}
        </div>
    }
    ReactDOM.render(<RootElement />,document.getElementById("root"));
    

6、 ... and : example ,24 Letters with different background colors complete

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type="text/babel"> // card  class Card extends React.Component {
       render(props) {
       function color() {
       let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; } console.log(color()); let style = {
       color: "black", backgroundColor: color(), width: "50px", height: "50px", textAlign: "center", lineHeight: "50px" }; return <div style={
      style}> {
      this.props.children} </div> } } // The box  class Root extends React.Component {
       render() {
       let ary = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K","R","M","N","O"]; let style = {
       width: "270px", height: "270px", display: "flex", justifyContent: "space-around", flexWrap: "wrap", margin: "auto", border: " 1px solid" }; return <div style={
      style}> {
      ary.map((item) => <Card>{
      item}</Card>)} </div> } } ReactDOM.render(<Root />, document.getElementById("root")) </script>
</body>

7、 ... and : How to divide components

  1. Each component can't do too much . Otherwise, the particle size is too large , Low reusability
  2. The particle size is too fine , Resulting in an increase in the amount of code , Increased complexity

版权声明
本文为[Fish that want to be taken away]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/134/202205141344069110.html

Scroll to Top