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