Zero: component style
/ *
Set the style of the component, 3 types:
1, inline style
Object style
3.Selector style
Note: There is a difference in writing format when setting styles in React and HTML5
** 1, HTML5 ends with;
React ends with,
** 2, HTML5 key and value are not quoted
React is a JavaScript object in React. The name of the key must not appear "-". You need to use camel case. If the value is a string, you need to add quotation marks.
** 3, in HTML, if value is a number, it needs to be unit
No need to bring units in React
* We define a component class and use three ways to style the component at the same time
* Requirement: Define a component, divided into two lines to display content
* <div> Inline style: set background color, border size, border color
<H1> </ h1> Object style: set background color, font color
* <P> </ p> selector style: set font size
* </ div>
**** Note: When using selector styles to set component styles in React, the property name cannot use class, you need to use className instead
Similar to this: use htmlFor instead of for
* /
One: composite components
Also called composite component, create multiple components to form a component
/ *
Requirement: Define a component WebShow, function: output the name and URL of the website, the URL is a clickable link.
Analysis: Define a component WebName to output the website name, define the component WebLink to display the website URL, and click
* /
// Define the WebName component
var WebName = React.creatClass ({
Render: function () {
Return return <h1> Blue Gull Technology </ h1>
}
});
// Define the WebLink component
var WebLink = React.createClass ({
Render: function () {
Return <a href="http://www.lanou3g.com"> http://www.lanou3g.com </a>
}
});
// Define WebShow component
var WebShow = React.creatClass ({
Render: function () {
Return return (
Div <<<div>
^ ^ ^ ^ <WebName />
Web Web Web <WebLink />
Div div div
);
}
});
// Render component
ReactDOM.render (
<WebShow />,
Document.getElementById ("container")
);
Two: props (a property object)
/ *
React can be seen as the View layer in MVC.It is generally not related to the data layer, but the two properties of the component are related to the data. (1) props (2) state
Props are the properties of the component itself.They are generally used in nested inner and outer components and are responsible for passing information (usually from parent components to child components)
Note: The properties in the props object correspond to the properties of the component one by one. Do not directly modify the value of the property in props.
* /
/ *
Requirement: Define a component WebShow, function: output the name and URL of the website, the URL is a clickable link.
Analysis: Define a component WebName to output the website name, define the component WebLink to display the website URL, and click
Idea:
1.Set two properties for WebShow, wname, wlink
2, WebShow's props object adds two property values
3.WebName gets the value of wname from the props object of WebShow, i.e. the name of the website
4, WebLink the same
* /
// define WebName
var WebName = React.creatClass ({
Render: function () {
Return <h1> {this.props.webname} </ h1>
}
});
// define WebLink
var WebLink = React.createClass ({
Render: function () {
Return <a href={this.props.weblink}> {this.props.weblink} </a>
}
});
// define Webshow
var WebShow = React.creatClass ({
Render: function () {
Return return (
Div <<<div>
^ <WebName webname = {this.props.wname} />
Web <WebLink weblink = {this.props.wlink} />
Div div div
);
}
});
// render
ReactDOM.render (
<WebShow wname = "Lan Bao technology" wlink = "http://www.lanou3g.com" />,
Document.getElementById ("container")
);
/ *
... this.props
The syntactic sugar provided by props can copy all the properties in the parent component to the child components
Requirement: Define a component Link. The Link component contains only one <a>. We do not set any attributes for <a>. All attributes are copied from the parent component
* /
var Link = React.createClass ({
Render: function () {
Return <a {...this.props}> {this.props.name} </a>
}
});
ReactDOM.render (
<Link href = "http://www.lanou3g.com" name = "Lan Bao technology" />,
document.getElementById ("container")
);
Three: children
/ *
this, props.children
Children is an exception and does not correspond to the properties of the component.
Represents all child nodes of a component
There is a kind of tag in HTML: list <ul> <ol> <li>
Define a list component, the actual content of the list items, and the number of list items are determined externally
* /
var ListComponent = React.creatClass ({
Render: function () {
Return (
<Ul>
{{{{{{
/ * / *
The number and content of the list items are uncertain, and can only be determined when the template is created.
Use this.props.children to obtain the content of the list items that need to be displayed from the parent component.
After obtaining the contents of the list items, you need to traverse the children and set them item by item.
React.Children.map method
The return value: an array object, where the elements in the array are <li>
/ / * / * /
React.Children.map (this.props.children, function (children) {
// Children are child nodes of the parent component obtained by traversal
Return return <li> {children} <li />
})
}}
^ ^ ^ </ Ul>
);
}
});
ReactDOM.render (
((
<ListComponent>
<H1> Blue Gull Technology </ h1>
<a href="http://www.lanou3g.com"> http://www.lanou3g.com </a>
</ ListComponent>
)),
document.getElementById ("container")
);
Four: attribute verification
/ *
propTypes
Component class properties
Used to verify that the properties of the component instance meet the requirements
* /
var ShowTitle = React.creatClass ({
Propprops: {
// The title array type must be a string
Title: React.PropTypes.String.isRequired
},
Render: function () {
Return return <h1> {this.props.title} </ h1>
}
});
ReactDOM.render {
<ShowTitle title = "123" />,
Document.getElementById ("container")
};
/ *
Setting default values for component properties
Set the default value of the property by implementing the component's getDefaultProps method
* /
var MyTitle = React.createClass ({
GetDefaultProps: function () {
Re return {
Title: "Blue Gull"
};
},
Render: function () {
Return <h1> {this.props.title} </ h1>
}
});
ReactDOM.render (
^ <MyTitle />,
Document.getElementById ("container")
);
Five: state
/ *
Event handling
Event names in react, lower case, camel case nomenclature
Case: define a component, which contains a button, and bind the button to the onclick event
* /
var MyButton = React.createClass ({
HandleClick: function () {
Al alert ("Effect of clicking a button");
},
Render: function () {
Return return (
<Button onClick = {this.handleClick}> {this.props.buttonTitle} </ button>
);
}
});
ReactDOM.render (
<MyButton buttonTitle = "Button" />,
Document.getElementById ("container")
);
/ *
state
props
The properties of the component itself
this.state
* /
// Requirement: Create a CheckButton component, including a Checkbox type <input>
// The check box will display different text in the selected and unselected states, that is, rendered according to the state
var CheckButton = React.createClass ({
// Define the initial state
GetInitialState: function () {
To return {
/ / The properties set in this object will be stored in the state
// Default: Unchecked
Check isCheck: false
}
},
// Define event binding method
handleChange: function () {
// Modify the state value, read the set state value through this.state
^ This.setState ({
^ IsCheck:! This.state.isCheck
});
},
render: function () {
// Set the displayed text according to the status value
// In jsx syntax, you cannot use if directly, using the trinocular operator
Var text = this.state.isCheck? "Checked": "Not checked";
Return (
<Div>
^ <Input type = "checkbox" onChange = {this.handleChange} />
^ ^ ^ <Text>
</ Div>
);
}
});
ReactDOM.render (
^ <CheckButton />,
Document.getElementById ("container")
);
// When the state changes, the render method inside the component is called.
Six: Form
/ *
Requirement: Define a component to display the content entered by the user in the input box in real time
Analysis: During the interaction between the component and the user, there is a state change, that is, the value of the input box
* /
var Input = React.createClass ({
GetInitialState: function () {
Re return {
Value: "Please enter"
};
},
handleChange: function (event) {
// Read the value entered by the user through event.target.value
^ This.setState ({
Value: event.target.value
});
},
render: function () {
Var value = this.state.value;
Re return (
<Div>
<Input type = "text" value = {value} onChange = {this.handleChange} />
<P> {value} </ p>
... div </ div>
);
}
});
ReactDOM.render (
Input <Input />,
Document.getElementById ("container")
);
Seven: component life cycle
/ *
Life cycle:
1.Three states of the component life cycle:
Mounting: component mounted, inserted into the real DOM
Updating: The component is updated and is being re-rendered
Unmounting: the component is removed, and the real DOM has been removed
2, four phases of the life cycle of the component
Create, instantiate, update, destroy
* /
/ *
1, Mounting / component mounting related: |
(1) componentWillMount
The component will be mounted and executed before rendering, but only once, even if the component is repeatedly rendered multiple times, or the state of the component is changed
(2) componentDidMount
The component is already mounted and executed after render. Repeated rendering of the same component is performed only once.
2, Updating / component update related
(1) componentWillReceiveProps (object nextProps)
Called before the loaded component receives new props. Note that the component will not execute when the component is initially rendered.
(2) shouldComponentUpdate (object nextProps, object nextState)
Called when the component determines whether to re-render.This interface is actually called immediately when the component receives new props or new state, and then passes
(3) componentWillUpdate (object nextProps, object nextState)
Component will be updated
(4) componentDidUpdate (object prevProps, object prevState)
Components have been updated
3, Unmounting / component removal related:
(1) componentWillUnmount
Triggered before the component is to be removed.You can use this method to perform some necessary cleaning.
4, related to props and state in the life cycle:
(1) getDefaultProps set the default value of props property
(2) getInitialState Appreciation state property initial value
* /
/ *
Introduction to each stage of the life cycle
* /
var Demo = React.creatClass ({
/ *
First: the creation phase
Process:
You only call the getDefaultProps method
* /
getDefaultProps: function () {
// Called when the class is created, set the default value of this.props
Console.log ("getDefaultProps");
Return {};
},
/ *
Two: instantiation stage
Process:
getInitlalState
componentWillMount
render
componentDidMount
* /
getInitlalState: function () {
// Set the default value of this.state
console.log ("getInitlalState");
return nll;
},
componentWillMount: function () {
// Called before render
console.log ("componentWillMount");
},
render: function () {
// Render and return a virtual DOM
console.log ("render");
return <div> Hello React </ div>
},
componentDidMount: function () {
// Called after render
// In this method, React will use the virtual DOM object returned by the render method to create a real DOM structure
// You can read DOM nodes in this method
console.log ("componentDidMount");
},
/ *
Three: update phase
Process:
componentWillReceiveProps
shouldComponentUpdate if the return value is false, the last three methods are not executed
componentWillUpdate
render
componentDidUpdate
* /
componentWillReceiveProps: function () {
Console.log ("componentWillReceiveProps");
},
shouldComponentUpdate: function () {
Console.log ("shouldComponentUpdate");
return true;
},
componentWillUpdate
: function () {
Console.log ("componentWillUpdate");
},
componentDidUpdate: function () {
Console.log ("componentDidUpdate");
},
/ *
Destruction phase
Process:
componentWillUnmount
* /
componentWillUnmount: function () {
Console.log ("componentWillUnmount");
},
});
// Create and load components for the first time
ReactDOM.render (
<Demo />, document.getElementById ("container")
);
// Re-render the component (equivalent to updating the component)
ReactDOM.render (
<Demo />, document.getElementById ("container")
);
// Remove component
ReactDOM.unmpuntComponentAtNode (document.getElementById ("container"));
