References for syntax comparison between ES5 ES6 of React and React Native

Module reference

In ES5, if the CommonJS standard is used, The React package is introduced through require. The code is similar to this:

// ES5
Var React = require ("react-native ");
Var {
Image,
Text,
View,
} = React; // reference different React Native components
In ES6, the import statement is more standard.

// ES6
Import React ,{
Image,
Text,
View,
} From 'react-native ';
Note that only versions later than React Native 0.12 support the import syntax.

Export a single class module

In ES5, to export a class to other modules, it is generally exported through module. exports.

// ES5
Var MyComponent = React. createClass ({
...
});
Module. exports = MyComponent;
In ES6, export default is usually used to implement the same function:

// ES6
Export default class MyComponent extends React. Component {
...
}
When referencing a class, ES5 and ES6 are also different:

// ES5
Var MyComponent = require ('./MyComponent. Js ');
 
// ES6
Import MyComponent from './MyComponent. Js ';
Define components

In ES5, a component class is usually defined through React. createClass, like this:

// ES5
Var Todo = React. createClass ({
Render: function (){
Return (
<View>
<Text> </text>
</View>
);
},
});

In ES6, we define a Component class by defining a class inherited from React. Component, like this:

// ES6
Class Todo extends React. Component {
Render (){
Return (
<View>
<Text> </text>
</View>
);
    }
}
Define component methods

From the above example, we can see that the component definition method does not use the name: function (), but directly uses the name (), and there cannot be a comma at the end of the method.

// ES5
Var Todo = React. createClass ({
ComponentWillMount: function (){
 
},
Render: function (){
Return (
<View> </view>
);
},
});
 
 
// ES6
Class Todo extends React. Component {
ComponentWillMount (){
 
    }
Render (){
Return (
<View> </view>
);
    }
}
Define the property type and default property of a component

In ES5, the property types and default attributes are implemented through the propTypes member and getdefaproprops methods respectively.

// ES5
Var Video = React. createClass ({
Getdefaproprops: function (){
Return {
AutoPlay: false,
MaxLoops: 10,
};
},
PropTypes :{
AutoPlay: React. PropTypes. bool. isRequired,
MaxLoops: React. PropTypes. number. isRequired,
PosterFrameSrc: React. PropTypes. string. isRequired,
VideoSrc: React. PropTypes. string. isRequired,
},
Render: function (){
Return (
<View>
);
},
});
</View>
In ES6, static members can be used in a unified manner.

// ES6
Class Video extends React. Component {
Static defaultProps = {
AutoPlay: false,
MaxLoops: 10,
    }
Static propTypes = {
AutoPlay: React. PropTypes. bool. isRequired,
MaxLoops: React. PropTypes. number. isRequired,
PosterFrameSrc: React. PropTypes. string. isRequired,
VideoSrc: React. PropTypes. string. isRequired,
    }
Render (){
Return (
<View>
);
    }
}
</View>
Note: For React developers, static members cannot be inherited in IE10 or earlier versions, but can be inherited in IE11 and other browsers, which sometimes brings some problems. Developers of React Native do not have to worry about this issue.

Initialize state

ES5:

// ES5
Var Video = React. createClass ({
GetInitialState: function (){
Return {
LoopsRemaining: this. props. maxLoops,
};
},
})
6. You can achieve this:

// ES6
Class Video extends React. Component {
State = {
LoopsRemaining: this. props. maxLoops,
    }
}

ES6 can also be initialized in the constructor:

// ES6
Class Video extends React. Component {
Constructor (props ){
Super (props );
This. state = {
LoopsRemaining: this. props. maxLoops,
};
    }
}
Provides methods as callback

In ES5, React. createClass will bind all the methods, so that it can be submitted to any place as a callback function, and this will not change. However, the official team gradually believes that this is not a standard and hard to understand.

// ES5
Var PostInfo = React. createClass ({
HandleOptionsButtonClick: function (e ){
// Here, 'eas' refers to the component instance.
This. setState ({showOptionsModal: true });
},
Render: function (){
Return (
<Touchablehighlight onpress = "{this. handleOptionsButtonClick}">
<Text> {this. props. label} </text>
</Touchablehighlight>
        )
},
});
In ES6, bind is required to bind this reference, or use the arrow function (it will bind this reference of the current scope) to call

// ES6
Class PostInfo extends React. Component
{
HandleOptionsButtonClick (e ){
This. setState ({showOptionsModal: true });
    }
Render (){
Return (
<Touchablehighlight onpress = "{this. handleOptionsButtonClick. bind (this)}"> this. handleOptionsButtonClick (e )}
                >
<Text> {this. props. label} </text>
</Touchablehighlight>
        )
},
}
The arrow function actually defines a temporary function here, arrow function arrow => is an empty bracket, a single parameter name, or multiple parameter names enclosed in parentheses, the arrow can be an expression (as the return value of the function) or a function body enclosed in curly brackets (return is required to return the value; otherwise, undefined is returned ).

// Arrow function example
() => 1
V => v + 1
(A, B) => a + B
() => {
Alert ("foo ");
}
E => {
If (e = 0 ){
Return 0;
    }
Return 1000/e;
}

It should be noted that, whether it is bind or arrow function, each execution returns a new function reference, therefore, if you need to reference the function to do something else (such as detaching the listener), you must save the reference yourself.

// Incorrect practice
Class PauseMenu extends React. Component {
ComponentWillMount (){
AppStateIOS. addEventListener ('change', this. onAppPaused. bind (this ));
    }
ComponentDidUnmount (){
AppStateIOS. removeEventListener ('change', this. onAppPaused. bind (this ));
    }
OnAppPaused (event ){
    }
}
 
// Correct practice
Class PauseMenu extends React. Component {
Constructor (props ){
Super (props );
This. _ onAppPaused = this. onAppPaused. bind (this );
    }
ComponentWillMount (){
AppStateIOS. addEventListener ('change', this. _ onAppPaused );
    }
ComponentDidUnmount (){
AppStateIOS. removeEventListener ('change', this. _ onAppPaused );
    }
OnAppPaused (event ){
    }
}

From this article, you can also learn one kind of practices:

// Correct practice
Class PauseMenu extends React. Component {
ComponentWillMount (){
AppStateIOS. addEventListener ('change', this. onAppPaused );
    }
ComponentDidUnmount (){
AppStateIOS. removeEventListener ('change', this. onAppPaused );
    }
OnAppPaused = (event) => {
// Define the method directly as the attribute of an arrow function. The this pointer is bound during initialization.
    }
}

Mixins

In ES5, mixin is often used to add some new methods to the class, such as PureRenderMixin,

Var PureRenderMixin = require ('react-addons-pure-render-mixin ');
React. createClass ({
Mixins: [PureRenderMixin],
 
Render: function (){
Return <div classname = "{this. props. className}"> foo </div>;
  }
});

In ES6, developers are recommended to discard the Mixin compiling method as soon as possible and use the new encoding method:

// Enhance. js
Import {Component} from "React ";
 
Export var Enhance = ComposedComponent => class extends Component {
Constructor (){
This. state = {data: null };
    }
ComponentDidMount (){
This. setState ({data: 'Hello '});
    }
Render (){
Return <composedcomponent {... this. props} = "" data = "{this. state. data}">;
    }
};
// HigherOrderComponent. js
Import {Enhance} from "./Enhance ";
 
Class MyComponent {
Render (){
If (! This. data) return <div> Waiting... </div>;
Return <div> {this. data} </div>;
    }
}
 
Export default Enhance (MyComponent); // Enhanced component
</Composedcomponent>
Use an "enhancement function" to add some methods to a class and return a new class. This will undoubtedly achieve most of the requirements implemented by mixin.

Other benefits of ES6 +

Combined with ES6 + deconstruct and attribute extension, it is more convenient for us to pass a batch of attributes to our children. In this example, all attributes other than className are passed to the div tag:

Class AutoloadingPostsGrid extends React. Component {
Render (){
Var {
ClassName,
... Others, // contains all properties of this. props extends T for className
} = This. props;
Return (
<Div classname = "{className}">
<Postsgrid {... others} = "">
<Button onclick = "{this. handleLoadMoreClick}"> Load more </button>
</Postsgrid> </div>
);
    }
}

The following statement overwrites the new className value while passing all attributes:

<Div {... this. props} = "" classname = "override">
...
</Div>
In this example, if the attribute does not contain className, the default value is provided. If the attribute already contains className, the value in the attribute is used.

<Div classname = "base" {... this. props} = "">
...
</Div>
{Comments on this entry are closed}

Git basic command sorting
By WEB full stack engineer on September
Install Git

Download git OSX
Download git for Windows
Download git for Linux

Create a new warehouse

Create a new folder, open it, and then execute

Git init
Create a git repository.

Check warehouse

Run the following command to create a clone version of a local repository:

Git clone/path/to/repository
If it is a repository on a remote server, your command will look like this:

Git clone username @ host:/path/to/repository
Workflow

Your local repository is composed of three "trees" maintained by git. The first is your working directory, which holds the actual file; the second is the temporary storage area (Index), which is like a cache area, saving your changes temporarily; the last is HEAD, it points to the result of your last submission.

Add and submit

You can make changes (add them to the temporary storage area) by using the following command:

Git add
Git add *
This is the first step in git's basic workflow. Use the following command to submit the changes:

Git commit-m "code submission information"
Now, your changes have been submitted to the HEAD, but haven't arrived at your remote repository.

View the Git status and enter

Git status
Git log
Push changes

Your changes are now in the HEAD of the local repository. Run the following command to submit the changes to the remote repository:

Git push origin master
You can replace the master with any branch you want to push.

If you have not cloned an existing repository and want to connect your repository to a remote server, run the following command to add the repository:

Git remote add origin
In this way, you can push your changes to the added server.

Branch

Branches are used to isolate feature development. When you create a repository, the master is the "default" branch. Develop on other branches, and then merge them into the main branch.

Create a branch named "magentonotes_dev" and switch it over:

Git checkout-B magentonotes_dev
Switch back to main branch:

Git checkout master
Delete the new branch:

Git branch-d magentonotes_dev
Unless you push a branch to a remote repository, the branch is invisible to others:

Git push origin
Update and merge

To update your local repository to the latest changes, execute:

Git pull
To get (fetch) in your working directory and merge (merge) remote changes.
To merge other branches to your current branch (for example, master), execute:

Git merge
In both cases, git tries to automatically merge the changes. Unfortunately, this may not succeed every time and may result in conflicts ). At this time, you need to modify these files to manually merge these conflicts (conflicts ). After modification, you need to execute the following command to mark them as merged successfully:

Git add
Before merging changes, you can use the following command to preview the differences:

Git diff
Git merge -- no-ff-m "merge with no-ff" dev # merge branches in normal mode
Git stash # save the work site
Git stash list # View work site
Git stash apply # resume the work site, but the work site content is not deleted
Git stash drop # delete a work site
Git stash pop # This command restores the site and deletes the site
Git stash apply stash @ {0} # Restore the specified site
Multi-person collaboration

Git remote # View remote branches
Git remote-V # View more detailed remote branch information
Git push origin master # push master branch to remote

Tag

It is recommended to create tags for software releases. This concept already exists and also exists in SVN. Run the following command to create a label named 1.0.0:

Git tag 1.0.0 1b2ffd63ff
Git tag-d # delete a tag
Git tag-a-m "commit info..." # specify tag information
Git tag-s-m "commit info..." # Use the PGP signature tag
Git push origin # push a local tag
Git push origin -- tags # pushes all unpushed local tags
Git push origin: refs/tags/# delete a remote tag
1b2e1d63ff is the first 10 characters of the submission ID you want to mark. You can use the following command to obtain the submission ID:

Git log
You can also use the first few digits of a submitted ID, as long as the ID point is unique.

Replace local changes

If you make a mistake (of course, this should never happen), you can use the following command to replace the local change:

Git checkout --
This command replaces the files in your working directory with the latest content in the HEAD. Changes that have been added to the temporary storage area and new files will not be affected.

If you want to discard all your local changes and submissions, you can get the latest version history on the server and direct your local branches to it:

Git fetch origin
Git reset -- hard origin/master
Git reset -- hard HEAD ^ # roll back the previous version
Git reset -- hard commit_id # roll back the version of the specified ID
Git log # view the submission history
Git log -- pretty = online # displays the submission history of a row of information
Git reflog # View History commands
Git diff HEAD -- file name # View file differences
Git checkout -- file name # Undo the modification. After the modification, the file has not been placed in the temporary storage area, and the undo modification will return to the same status as the version Library;
Practical Tips

Built-in graphical git:

Gitk
Color git output:

Git config color. ui true
When the history is displayed, only one row is displayed for each submitted information:

Git config format. pretty oneline

Add files to the temporary storage area in interactive mode:

Git add-I

Ignore special files:
Create a special. gitignore file under the root directory of the Git workspace, and enter the file name to be ignored. Git will automatically ignore these files.
Configuration template:

Https://github.com/github/gitignore

Configuration alias:

The Git configuration files of each repository are stored in the. git/config file, and the Git configuration files of each repository are stored in the. git/config file.

Git config -- global alias. st status
Git config -- global alias. co checkout
Git config -- global alias. ci commit
Git config -- global alias.br branch
Git config -- global alias. unstage 'reset head'
Git config -- global alias. last 'log-1'
Git config -- global alias. lg "log -- color -- graph -- pretty = format: '% Cred % h % Creset-% C (yellow) % d % Creset % s % Cgreen (% cr) % C (bold blue) <% an> % Creset '-- abbrev-commit"
Git config -- global -- unset alias. st # cancel alias
Connect to a git server with non-port 22 ssh

1
Git clone ssh: // git @ hostname: port/local/xxx. git