1. The state description:
1. State is the most important attribute of the component object, and its value is the object (which can contain multiple key-value combinations) 2. Components are called "state machines" and update the corresponding page display by updating the state of the component (re-rendering the component) 3. It is important to note that the state must be updated by setState, and that the update is a merge, not an overrideCopy the code1.2. State
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom is used to support the react operation.
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<script type="text/babel">
// 1. Create components
class Weather extends React.Component{
// The constructor is called several times ———— has an instance that is called only once
constructor(props){
console.log('constructor');
super(props);
// Initialization state
this.state = {
isHot:true.wind:'the wind'
};
// Fix this in changeWeather
this.changeWeather = this.changeWeather.bind(this);
}
// render how many times? -- 1+n times 1 is the number of state updates of n that we initialized
render(){
// Read the state
console.log(this);
return <h1 onClick={this.changeWeather}>The weather is very {this.state.ishot? 'hot ':' cool '},{this.state-wind}</h1>
}
// How many changeWeather calls? -- Click several times to call several times, click several times to call several times
changeWeather(){
// Where is changeWeather, ————Weather's prototype object
// Since changeWeather is called as a callback to onClick, it is not called by instance, but directly
// Methods in the class have local strict mode turned on by default, so this in changeWeather is undefined
console.log(this);
// Get the old isHot value
const isHot = this.state.isHot;
// It is important to note that the state cannot be changed directly
// this.state.isHot = ! isHot; // Error
// console.log(this.state.isHot);
// It is important to note that the state must be updated by setState. Cutting updates is a merge, not an overwrite
this.setState({isHot:! isHot}) } }// 2. Render the component to the page
ReactDOM.render(<Weather/>.document.getElementById('test'));
</script>
</body>
</html>
Copy the codeThere are three ways to call the react event, and the third is recommended.
<button id="btn1"> </button> <button id="btn2"> </button> </button onclick="demo()"> </button> <script type="text/javascript"> const btn1 = document.getElementById('btn1'); Btn1. addEventListener('click',()=>{alert(' button 1 is clicked '); }) const btn2 = document.getElementById('btn2'); Btn2. onclick = ()=>{alert(' button 2 is clicked '); } function demo(){alert(' button 3 is clicked '); } </script>Copy the code1.3 the state abbreviations
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom is used to support the react operation.
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<script type="text/babel">
// 1. Create components
class Weather extends React.Component{
// constructor(props){
// super(props);
// // this.state = {
// // isHot:true,
// // Wind :' The breeze '
/ / / /};
// // this.changeWeather = this.changeWeather.bind(this);
// }
// Initialization state
state = { isHot:true.wind:'the wind'};
render(){
return <h1 onClick={this.changeWeather}>The weather is very {this.state.ishot? 'hot ':' cool '},{this.state-wind}</h1>
}
// To customize the method ————, use the assignment statement + arrow function
changeWeather = () = >{
const isHot = this.state.isHot;
this.setState({isHot:! isHot}) } } ReactDOM.render(<Weather/>.document.getElementById('test'));
</script>
</body>
</html>
Copy the code2.1 Restrictions on props
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom () {react-dom ();
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<! -- Introduce prop-types to restrict component tag properties -->
<script src=".. /js/prop-types.js"></script>
<script type="text/babel">
// 1. Create components
class Person extends React.Component{
render(){
console.log(this);
// props is read-only
const {name,age,sex} = this.props;
// this.props.name='jack'
return (
<ul>
<li>Name: {name}</li>
<li>Gender: {sex}</li>
<li>Age: + 1} {the age</li>
</ul>)}}// Type the attributes of the tag
Person.propTypes = {
name:PropTypes.string.isRequired, // Restrict name to a string
sex:PropTypes.string, // Restrict sex to a string
age:PropTypes.number, // Limit age to a numeric value
speak:PropTypes.func, // restrict speak as a function
}
// Specify the default tag attribute value
Person.defaultProps={
sex:'male'.// The default value of sex is male
age:0 //age The default value is 18
}
// 2. Render the component to the page
ReactDOM.render(<Person name="tom" speak={speak} />.document.getElementById('test1'));
ReactDOM.render(<Person name="jerry" age={20} sex="Male"/>.document.getElementById('test2'));
const p ={name:'liu'.age:18.sex:'woman'};
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'));
ReactDOM.render(<Person {. p} / >.document.getElementById('test3'));
function speak(){
console.log('I spoke');
}
</script>
</body>
</html>
Copy the code2.2 Props short for restriction
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom () {react-dom ();
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<! -- Introduce prop-types to restrict component tag properties -->
<script src=".. /js/prop-types.js"></script>
<script type="text/babel">
// 1. Create components
class Person extends React.Component{
constructor(props){
// Whether the constructor receives props and passes it to super depends on whether you want to access props through this in the constructor
super(a);console.log('constructor'.this.props);
}
// Restrict the attributes of the tag
static propTypes = {
name:PropTypes.string.isRequired, // Restrict name to a string
sex:PropTypes.string, // Restrict sex to a string
age:PropTypes.number, // Limit age to a numeric value
speak:PropTypes.func, // restrict speak as a function
}
// Specify the default tag attribute value
static defaultProps={
sex:'male'.// The default value of sex is male
age:0 //age The default value is 18
}
render(){
console.log(this);
// props is read-only
const {name,age,sex} = this.props;
// this.props. Name ='jack' // This line is an error because props is read-only
return (
<ul >
<li>Name: {name}</li>
<li>Gender: {sex}</li>
<li>Age: + 1} {the age</li>
</ul>)}}// 2. Render the component to the page
ReactDOM.render(<Person name="tom" speak={speak} />.document.getElementById('test1'));
ReactDOM.render(<Person name="jerry" age={20} sex="Male"/>.document.getElementById('test2'));
const p ={name:'liu'.age:18.sex:'woman'};
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'));
ReactDOM.render(<Person {. p} / >.document.getElementById('test3'));
function speak(){
console.log('I spoke');
}
</script>
</body>
</html>
Copy the code2.3 Functional Components use props
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom () {react-dom ();
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<! -- Introduce prop-types to restrict component tag properties -->
<script src=".. /js/prop-types.js"></script>
<script type="text/babel">
// 1. Create components
function Person(props){
console.log(props);
const {name,age,sex} = props
return (
<ul>
<li>Name: {name}</li>
<li>Gender: {sex}</li>
<li>Age: {age}</li>
</ul>)}// This is the only limit
// Type the attributes of the tag
Person.propTypes = {
name:PropTypes.string.isRequired, // Restrict name to a string
sex:PropTypes.string, // Restrict sex to a string
age:PropTypes.number, // Limit age to a numeric value
speak:PropTypes.func, // restrict speak as a function
}
// Specify the default tag attribute value
Person.defaultProps={
sex:'male'.// The default value of sex is male
age:0 //age The default value is 0
}
// 2. Render the component to the page
ReactDOM.render(<Person name="jerry" sex="Female" />.document.getElementById('test'));
</script>
</body>
</html>
Copy the code3.1 Refs in string form
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom () {react-dom ();
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<script type="text/babel">
// 1. Create components
class Demo extends React.Component{
render(){
return(
<div>
<input ref="input1" type="text" placeholder="Click the button to prompt data"/>
<button onClick={this.showData}>Click on the data to the left of my prompt</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="Lost focus prompt data" />
</div>)}// Display the data in the left input box
showData = () = >{
/ / the function body
console.log(this);
const {input1} =this.refs;
alert(input1.value);
}
// Display the data in the input box on the right
showData2 = () = >{
const {input2} = this.refs; alert(input2.value); }}// 2. Render the component to the page
ReactDOM.render(<Demo/>.document.getElementById('test'));
</script>
</body>
</html>
Copy the code3.2 Callback function form of ref
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom () {react-dom ();
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<script type="text/babel">
// 1. Create components
class Demo extends React.Component{
state = {isHot:true};
render(){
const {isHot} = this.state
return(
<div>
<h1 >{isHot===true? 'cool ':' hot '}</h1>{/ *<input ref={(cNode)= >{this.input1=cNode; Console. log('#',cNode)}} placeholder=" placeholder "/> * /}<input ref={this.saveInput} type="text" placeholder="Click the button to prompt data" />
<button onClick={this.showData}>Click on my prompt data</button>
<button onClick={this.changeData}>Click on me to switch the weather</button>
</div>
)
}
saveInput = (cNode) = >{
this.input1 = cNode;
console.log(The '@',cNode);
}
changeData = () = >{
const {isHot} = this.state
this.setState({isHot:! isHot}); }// Display the data in the left input box
showData = () = >{
/ / the function body
const {input1} =this; alert(input1.value); }}// 2. Render the component to the page
ReactDOM.render(<Demo/>.document.getElementById('test'));
</script>
</body>
</html>
Copy the code3.3 The number of times the callback ref is executed
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! -- Get a container ready -->
<div id="test"></div>
<! React core library -->
<script src=".. /js/react.development.js"></script>
<! React-dom () {react-dom ();
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<script type="text/babel">
// Create a component
class Demo extends React.Component{
state= {isHot:false}
render(){
return(
<div>
<h2>The weather is very {this.state.ishot? 'Hot ':' cool '}</h2>
<input type="text" ref={(currentNode)= >{this.input1=currentNode; console.log('#',currentNode)}} /><button onClick={this.showInfo}>Click on the data I prompted for input</button>
<button onClick={this.changeWeather}>Point me to change the weather</button>
</div>
)
}
showInfo = () = >{
const {input1} = this;
console.log(input1);
alert(input1.value);
}
changeWeather = () = >{
const {isHot}= this.state;
console.log(this);
this.setState({isHot:!isHot});
}
}
// Render the component to the page
ReactDOM.render(<Demo/>.document.getElementById('test'));
</script>
</body>
</html>
Copy the codeRef executes null first and then gets the real DOM, because React empties the ref every time it runs
3.4 createRef
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<! Create a container -->
<div id="test"></div>
<! React Base library -->
<script src=".. /js/react.development.js"></script>
<! React-dom library is used to support the react operation.
<script src=".. /js/react-dom.development.js"></script>
<! -- Introduce Babel to convert JSX to JS -->
<script src=".. /js/babel.min.js"></script>
<script type="text/babel">
// Create a component
class Demo extends React.Component{
myRef = React.createRef();
myRef2 = React.createRef();
// react.createRef returns a container that stores the nodes marked by ref
// This container is ref specific
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="Triggered on click"/>
<button onClick={this.showData}>Click on the data to the left of my prompt</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="Triggered when mouse is away" />
</div>
)
}
showData = () = >{
alert(this.myRef.current.value);
}
showData2 = () = >{
alert(this.myRef2.current.value); }}// Render the component to the page
ReactDOM.render(<Demo/>.document.getElementById('test'));
</script>
</body>
</html>
Copy the code