How to create a project:
method one:
Install react scaffolding:
npm i create-react-app -g global installation
Create a react project:
create-react-app myapp myapp is the name of the project
Way two:
If you don’t want to install create-react-app globally, you can use npx
npx create-react-app myapp
to create a project using scaffolding. By default, there are several libraries:
1) React raect top-level library (core library)
2) React-dom react If your code needs to run on the web, you need to use react-dom. If your code needs to run on a native app, you need to introduce react-native
3) react-scripts contains the configuration and scripts for running or packaging the react project
Run the project:
cd myapp
npm run start
The use of components in react
①Create the component, and then export it through export default②Then
import it in the entry (index.js) in
src③Render it through ReactDom.render
Example:
import ReactDOM from "react-dom"
import MyCom from "./components/MyCom"
ReactDOM.render(<MyCom name="react" link="https://react.docschina.org/" />, document.getElementById("root"))
Receive data through components created by class: {this.props.xxx}
function creates components to receive data: {props.xxx}
Verification of props type
First we must introduce:
import PropTypes from 'prop-types'
Writing method 1 (generally placed at the bottom):
MyCom.propTypes = {
name:PropTypes.string,// 期待传入的name是一个string类型
}
MyCom.defaultProps = {
address:"bj"
}
Writing 2 (generally put under the constructor, and above the render):
static defaultProps = {
address:"bj"
}
static propTypes = {
link:PropTypes.string
}
Use of state in components
State: The
component is one of the cores in react, and the state in the component is the core. Some people call react a state machine.
The state is the data inside the react component and does not need to be passed in from outside. Similar to data in vue.
A recommended way to define status
constructor(){
super();
this.state = {
number:100
}
}
The second way of defining state
constructor(){
super();
}
state = {
number:666
}
You can use state in jsx
render(){
return (
<div>
{
/* 在jsx中就可以使用状态 */}
<h1>{
this.state.number}</h1>
</div>
)
}
update status:
The update state provides an api in react, called setState, which is similar to the setData
update state machine in the applet (the state machine also needs to be updated in the applet)
if the state machine is updated, then it will automatically call the render function
//onClick是封装的属性，_dealChangePerson()是自己定义的方法
<button onClick={
()=>this._dealChangePerson() }>xxx</button>
//直接在下面定义就行
_dealChangePerson(){
this.setState({
})
}
componentDidMount()
Hook function: It can also be used to modify the state.
DidMount is not executed every time after rendering.
In React, the only way to modify the state is to update the state by setState
(recommended)
componentDidMount(){
setTimeout(()=>{
// 更新状态机（只要状态更新了，render函数就会重新执行）
this.setState({
counter:100
})
},2000)
}
Way two to update status
componentDidMount(){
setTimeout(()=>{
this.state.counter = 100
this.setState({
}); // 会引起重新render
},2000)
}
For class components, its data source can be state or props
If the parameter of setState is a function, the function has two formal parameters by default. Formal
parameter 1: Represents the last state
. Formal parameter 2: Represents the current state of the data received by the component. The update state of the data
must be in the setState of this and the next return. You want to get the latest The data needs to be obtained in the second function parameter
componentDidMount(){
// setState的参数可以是一个函数
// 如果setState的参数是一个函数，函数默认有两个形参
// 形参1：表示上一次的状态
// 形参2：表示当前的组件接收的数据
this.setState((preState,props)=>{
console.log(preState, props);
// 更新状态
return {
counter:preState.counter+100
}
}, ()=>{
// setState中可以指定第二个函数参数
// 在这里，可以获取最新的状态
console.log(this.state.counter);
})
}
props and state
State is the internal state of the component, which can be modified by setState inside the component. If the state is modified, the interface will be re-rendered.
State is a data source that is internal to the component, locally, and can only be used in the current component. Other components cannot use or modify state.
Props are the data passed to the component when using the component, mainly the data passed in from the outside. React does not recommend modifying props inside the component.
If you are not sure whether to use props or state in a component, then props are recommended. Use state as little as possible and use props more.
If there is state in a component, then this component is called a stateful component, and a component declared with a class is a stateful component.
If there is no state in a component, then this component is called a stateless component, and the component declared with a function is a stateless component. Functional components + hooks can also achieve the purpose of using state in functional components.
props and state:
1) The attributes can be obtained from the parent component, but the state is not. The state is the component's own, content, and partial.
2) Attributes can be modified in the parent component, if modified, the props data passed in to the child component will also change. It will also cause render to be re-executed.
3) The property can be set to the default value, and the state can also be set to the default value.
4) Do not modify the value of the property in the component, but the value of the state usually we will modify
...