React Learning Notes
I. React
React is an open-source front-end component framework of facebook. Although there are various comments on React at present, the point of focus of React (decomposition of front-end functions makes front-end development as fast and easy to maintain as building blocks) has been favored by many companies.
1. The characteristics of React:
(1) React can be used only as a view in MVC, which makes it easy to use React to develop on the basis of existing projects.
(2) Virtual DOM: This is a highlight of React and the core of React's high performance. Using virtual DOM, the original operation of DOM updates of HTML pages can be transferred to memory. By calculating the efficiency in memory, the DOM view that needs to be updated is calculated and updated to complete the rendering of the whole component.
(3) Data stream: React uses one-way data stream, which is faster and more flexible than traditional data binding.
2. Hello World of React
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloWorld= React.createClass({
render: function() {
return (
<div>
Hello, world!
</div>
);
}
});
ReactDOM.render(
<HelloWorld/>,
document.getElementById('example')
);
</script>
</body>
</html>In the above code, first of all, a Reac component of HelloWorld is defined. The component returns a div, in which Hello, world! Strings are written. Then, the HelloWorld component is rendered into the div with Id as "example" in the body by the React DOM. render method.
2. Pros attribute transfer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloWorld= React.createClass({
render: function() {
return (
<div>
Hello, world, {this.props.name}!
</div>
);
}
});
ReactDOM.render(
<HelloWorld name="Jason"/>,
document.getElementById('example')
);
</script>
</body>
</html>The above code is almost the same as that of helloworld. The only difference is that a name is added after Hello, which is passed in through the name attribute when rendered by ReactDOM.render. All attributes appearing in the label (such as the name above) are assigned to the props object inside the React component.
- props are used to pass properties to React components. Generally speaking, properties are inherent to components and cannot be changed within components.
3. state status update
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloWorld= React.createClass({
getInitialState : function(){
return {
number: 0
}
},
render: function() {
return (
<div>
Hello, world! Number : {this.state.number}!
</div>
);
},
handleNumberAdd : function(){
this.setState({number : this.state.number + 1});
},
componentDidMount : function(){
setInterval(this.handleNumberAdd, 1000);
}
});
ReactDOM.render(
<HelloWorld name="Jason"/>,
document.getElementById('example')
);
</script>
</body>
</html>In the above code, a numeric parameter is added after Hello and world. The value of this parameter is obtained by this.state.number, and there is a timer in the componentDidMount method. The function is to call the handleNumberAdd method every 1 second. In the handleNumberAdd method, the value of this.state.number is added to 1 and then assigned to number. What is setState for? It's easy to understand literally. It's actually used to update the state object inside the React component. Running the code will easily find that every second in the interface Hello, world! Number: 0 value will increase by 1, observation can be found that the browser did not update the whole number, which is the role of the virtual DOM mentioned earlier.
- State is used to maintain the current state of the React component. Once the state changes, the component calculates the virtual DOM and re-renders the changes.
4. React Common Functions
- (1)getDefaultProps: This method is used to set the default properties of the React component and return a js object
- (2)getInitialState: This method is used to set the default state of the React component, return a js object or null
- (3)componentDidMount: Called when the component is rendered
- (4)componentWillUnmount: Called when the component is about to be destroyed
- (5)componentDidUpdate: Called when component updates are complete
- (6)setState: Used to update the status of the current component
- (7)render: Used to return the content to be rendered
Two, JXS
Simply put, JSX is actually js, but JSX allows html code to be written in js. (We already used the JSX grammar when we introduced React above)
For example:
render: function() {
return (
<div>
Hello, world! Number : {this.state.number}!
</div>
);
}Several points need to be noted:
- 1. Write className in JSX, such as <div className="test_class"></div>.
- 2. When writing embedded style in JSX, you must use objects. For example:
var style = { color : red }; <div style={style}></div> - 3. The outermost layer of HTML tag returned by JSX can only have one HTML tag. For example:
return (<div>
Hello, world! Number : {this.state.number}!
</div>)Yes, but
return (<div>
Hello, world! Number : {this.state.number}!
</div>
<div>
Hello, world! Number : {this.state.number}!
</div>)It is not allowed.