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