JSX
JSX can prevent XSS injection attacks.
Before rendering, React DOM will format all values in JSX to ensure that users cannot inject any code outside of the application. Before rendering, all data is escaped into string processing .
Element rendering
Update rendered elements
React elements are non-mutable. Once you create an element, you cannot modify its child elements or any attributes. The only way to update the UI is to create a new element and pass it to the ReactDOM.render() method. But big Most of the time, the render method will only be called once
Components and attributes
Components
Components are divided into functional components and class components.Functional
:
function Welcome(props) {
return <h1>Hello, {
props.name}</h1>;
}
ES6 class:
class Welcome extends React.Component {
render() {
return <h1>Hello, {
this.props.name}</h1>;
}
}
Property, Props is read-only
Props are read-only. No matter you declare a component in a function or class method, you cannot modify its own props.
A function that does not change the input is called a pure function.
React components must be pure functions, and it is forbidden to modify their own props
state state
The state can only be setState()set by methods, and the only this.stateplace that can be allocated is the constructor. The
state update is asynchronous, and you cannot rely on the value of one to update the other . You can perform the following processing in the callback function
Any state is always owned by a specific component, and any data or UI derived from that state can only affect the components below the tree
Event handling
Camel case naming, passing a function as an event handler
In js code, the event handler function returns a false to prevent the default event, but in React, it must be manually called e.preventDefault()to prevent the default event
When React, you generally do not need to call addEventListenerto add event listeners in the DOM element is created. Instead, just provide a listener when the element is initially rendered.
When calling event handlers, make sure that this points to the current component, so to bind this, you can use the following methods
- bind绑定 this.handleClick() = this.handleClick.bind(this)
- Use the arrow function when calling the function onClick=((e) => this.handleClick(e))
- The function directly uses func = () => ()
Why do event handling in react bind this
I haven't studied this issue in depth before, and I carefully studied this issue after rereading it.
We all know that the this point in the ordinary js function is the object that calls the function, and it points to whom it is close to. In
non-strict mode, this points to by default In
strict mode of global object window , this is undefined
The arrow function has already determined the direction of this at the time of definition, and will not change according to who calls it.
Based on this, we react directly why onClick={this.handleClick}not?
The fundamental reason is react in a virtual dom dom, JSX is React.createElement(component, props, ...children)syntactic sugar, when in fact we call the event function code
render(){
return (<a href="#" onClick={
this.handleClick}>click me </a>
})
Is parsed into
render(){
return React.createElement(
"a",
{
onClick: this.handleClick},
"click me"
);
}
In such a code, onClick = {function}in onClickitself is an "intermediate variable", which this.handleClickis passed to another function as a callback , and this is lost at this time. Give a simple example
class Cat {
sayThis () {
console.log(this);
}
exec (cb) {
cb();
}
render () {
this.exec(this.sayThis);
}
}
const cat = new Cat();
cat.render();
When sayThis is passed as a parameter to exec as a callback function, this has been lost,
so we need to bind this in the event processing of react
Form
Controlled component
Those who have used vue know that vue is a two-way binding data flow. The data element in the form can be bound only by v-model,
but react is a one-way data flow. If you want to bind an input box in the form, A state must be carried out by controlled components
handleChange(event) { this.setState({value: event.target.value}); }
<input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />
Use the onChange processing function of the form to update the input data. In this function, you can perform special processing on the input data, which is more in line with the design philosophy of react to give users greater freedom.
At last
Remember that reading code is far more important than writing code. Modular and clearly structured code is most conducive to reading. When creating a large component library, you will appreciate modularity, clear structure and reusable code, and your code lines will gradually decrease.