Initial react specification, react features, react components and JSX

Fish that want to be taken away 2022-05-14 14:00:52 阅读数:540

initialreactspecificationreactfeatures

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://qdmana.com/2022/134/202205141344069110.html