Table of contents
2. Put the component in a separate js file
9. Attribute props (read-only)
10. Life cycle (hook function)
1、componentWillReceiveProps(nextProps)
2、shouldComponentUpdate(nextProps,nextState)
4. render is the same as the render in initialization
5、componentDidUpdate(preProps,preState,value)
React components
Component introduction: componentization concept, representing a certain part and function in the page, independent and reusable
1. Two creation methods
function component
1. Components created using JS functions
2. The function name must start with a capital
3. The component must have a return value
For example:
function Hello() {
return (
<div>333333</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById("root"))class component
1. Class names start with uppercase
2. Class components should inherit React.Component parent class
3. The class component must provide the render() method
4. render() must have a return value
For example:
class Ok extends React.Component {
render() {
return (
<div>ok</div>
)
}
}
ReactDOM.render(<OK/>, document.getElementById("root"))2. Put the component in a separate js file
step:
1. Create a component js file, eg: Book.js;
2. Import React in the Book.js file;
3. Utility classes or functions to create components;
4. Components must be exported before they can be used;
5. Import Book.js in the specified file;
6. Render components.
For example:
Book.js
// Book.js
import React from 'react'
class Book extends React.Component {
render() {
return(
<h1>读书明智</h1>
)
}
}
// 导出
export default Bookindex.js
import Book from './Book'
ReactDOM.render(<Book/>,document.getElementById("root"))3. The style of the component
1. Inline styles
2. External import
(1) Prepare the external CSS file and import it in js
Note : The class attribute is recommended to be written as className
Fourth, ref gets dom
<p ref='myword'>你好</p>The p tag can be obtained through this.refs.myword
Note: refs will be deprecated, and an error will be reported in strict mode
New way of writing:
myRef = React.createRef();
<div ref={this.myRef}></div>If the ref is bound to a component, we get that component.
5. List rendering
6. Conditional rendering
1、{ 条件 ？<p>yes</p> : <p>no</p> }
2、{ wait && <p>ok</p> }
7. Event handling
1. Event binding
on+event name={fn} Note: use camel case here
For example:
<button onClick={this.myclick}>1</button>
<button onClick={()=>{
console.log(this);
}}>1</button>Eight, state state
Components that set the state are called stateful components, and components that do not set the state are called stateless components.
data in the component
For example:
1、
class A extends Component {
state = {key:value}
}2、
class A extends Component {
constructor() {
super();
this.state = {
key: value
}
}
}Notice:
(1) Define state in the class (you can only write this name) object --------state = {key:value};
(2) Do not modify the state directly: this.state.ok='ok' -------- use setState({key:value})
(3) setState Note:
In the synchronous logic, the status and real dom are updated asynchronously;
In asynchronous logic, update state and real dom synchronously;
It accepts the second parameter, which is a callback function, where the state and dom are updated.
9. Attribute props (read-only)
State is an internal attribute, and props is to receive data from the outside for better reusability.
1. A component:
{/*属性*/}
<MyNav title={this.title} leftBtn={isShowLeft}/>2、MyNav.js:
render() {
let {title,leftBtn} = this.props;
return (
<div>
{leftBtn && <button>left</button>}
<p>{title}</p>
</div>
)
}Attribute validation:
import myprop from 'prop-types'
static propTypes = {
title:myprop.string,
leftBtn:myprop.bool
}Default properties:
static defaultProps = {
title:'标题'
}Summary of attributes and status:
(1) Attribute is the data transmission and operation of the parent component to the child component;
(2) The state is the data inside the component itself.
10. Life cycle (hook function)
Only class components (function components need hooks support)
initialization phase
1、componentWillMount
The component is about to be mounted, the last chance to modify the state before render;
Commonly used in: state initialization;
Note: If there is a warning, use UNSAFE_componentWillMount ;
2、render
Can only access props in state, cannot modify state and dom output;
3、componentDidMount
After the render is successfully executed and the rendering of the dom node is completed, the dom can be modified;
Commonly used in: axios request, subscription function call, timer, dom operation;
running stage
1、componentWillReceiveProps(nextProps)
The parent component modifies the attribute trigger;
Get the attributes from the parent component first, where you can perform axios requests or other logic processing;
Remarks: If there is a warning, UNSAFE_componentWillReceiveProps can be used ;
2、shouldComponentUpdate(nextProps,nextState)
Returning false will prevent the call of render;
The parameter is the new attribute and state after being modified;
3、componentWillUpdate
The component will be updated, and the properties and status cannot be modified;
Remarks: If there is a warning, UNSAFE_componentUpdate can be used ;
4. render is the same as the render in initialization
5、componentDidUpdate(preProps,preState,value)
Dom can be modified;
The parameter is the attribute and state before being modified;
Destruction phase
1、componentWillUnmount
Clean up before removing components.