Components and component properties
UI unit contains content, styles and features: Component
Creating a component
Special Note: The name must be capitalized the first letter of the component
Distinguish between components or a single domain with a common function is no longer react element ttype
- Function Component
Returns an element React
When the analysis is divided into first page or component js js js also introduced special components react because to establish react element
Second, when rendering function accepts two ways function component tag state following execution state
The return value is a component still react on changing elements just type values
function MyCom1() {
return <li>我的组件1</li>
}
console.log(api.MyCom)
let MyCom = api.MyCom;
ReactDOM.render(<div>
<MyCom></MyCom>
<MyCom1></MyCom1>
</div>, conter);
//组件内容
import React from 'react';
import ReactDOM from 'react-dom';
let api = {};
api.MyCom = function() {
// eslint-disable-next-line react/react-in-jsx-scope
return <div>我的组件</div>
}
// eslint-disable-next-line no-unused-expressions
export default api;- Class components
Must inherit React.Component
Must provide the render function, for rendering component entry is created each time a file using the component will react element type is the type of class
//组件内容
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
export default class MyClassCom extends Component {
render() {
return (
<div>
<li>这是类组件元素</li>
</div>
)
}
}
//入口文件渲染
import MyClassCom from'./MyClassCom'
ReactDOM.render(<div>
<MyCom></MyCom>
<MyClassCom></MyClassCom>
</div>, conter);Properties of the component
Custom components pass values may be utilized Crossing structure html code mapping an object is to react
And can also be written directly as html
Transfer element content
Built-in components: div, h1, p
<div>
asdfafasfafasdfasdf
</div>
props.children
props.content1 ...... properties can be simultaneously transferred into and custom elements inside props
If custom components to transfer the contents of the element, the element content as children React property will deliver in the past. Ignores blank
- For the function component attribute as an attribute of an object, the parameters passed to the function
import React from 'react' export default function student(props) { console.log(props); return ( <div> <li> 【姓名】:{props.name} 【性别】:{props.sex === 0 ? '男' : '女'} 【Email】:{props.email} 【地址】:{props.address} </li> </div> ) } - For component class, property as a property of an object, the parameters passed to the constructor
-
import React, { Component } from 'react' import Student from './Student' export default class StudentLIst extends Component { render() { console.log( this.props.data) // eslint-disable-next-line array-callback-return var list = this.props.data.map(item => { // eslint-disable-next-line no-unused-expressions return <Student {...item}></Student> }) console.log(list) return ( <ul> {list} </ul> ) } }
Note: The properties of a component, you should use small hump nomenclature
Components can not change their properties .
React elements previously learned, in essence, is a component (built-in component)
The philosophy React: Who owns the data and who have the power to change
React in the data, top-down flow
--------------------------------------------------------------------------------------------------------------------------
Component Status
Component Status: component can maintain their own data
Valid only in the state of the component class component
State (state), is essentially a component attribute class, an object can have our own control for their own use
State initialization
Initialization use constructor initializes
//初始化组件状态
constructor(props) {
super(props);
console.log(props)
this.state = {
left:this.props.left || 0,
top:this.props.top || 0,
xSpeed:this.props.xSpeed || 0,
ySpeed:this.props.ySpeed || 0,
bg:props.bg || "#f40"
}
}
// 必须要用该函数改变state中的数据 才会触发重新渲染
this.setState({
left:newLeft,
top:newTop
})
// console.log(this.state)Change of state
Can not directly change state: because React to the state can not monitor the changes will lead to other parts of the reference data error
Must be used ({}) changes state this.setState
Once called the this.setState, it will lead to re-render the current component automatically trigger re-rendering
Data components
- props: The user data is transmitted by the data components, the components themselves do not own, and therefore the assembly can not change the array
- You can not change the data coming
- state: The array is created by the component itself, owned by the component itself, so the assembly the right to change the data but change subcomponents own data components will still affect their components
-----------------------------------------------------------------------------------------
In-depth understanding of setState
setState, change its status, may be asynchronous
Note that setStatus () method is concerned immediately after the function call to render state to change prior to completion so render digital printing in terms of the implementation of the callback function for
If the code change of state in the event of an HTML element, then it is asynchronous, or synchronous
import React, { Component } from 'react'
export default class Test extends Component {
state = {
n : 1
}
handleChange = () => {
//改变组件属性 虽然写了多个语句但效果还是一部效果
// 不可以实现状态的连续改便
//此处我们想要做到同步改变 但是该方法是异步执行在第二个状态改变时 第一个状态改变尚未完成 故相当于只进行了一次状态改变
this.setState({
n:this.state.n + 1
})
this.setState({
n:this.state.n + 1
})
this.setState({
n:this.state.n + 1
})
console.log(this.state.n)
//此时获取到的是状态改变之前的值 0 获取状态改变后的值要用回调函数形式进行
//但是回调函数仍然无法做到连续改变 需要用回调中嵌套回调才可以
}
render() {
console.log('render')
return (
<div>
<span>{this.state.n}</span>
<button onClick={this.handleChange}>+</button>
</div>
)
}
}
If you have an event, we need to synchronize multiple calls, use the function way to get the latest status codes are as follows
import React, { Component } from 'react'
export default class Test extends Component {
state = {
n : 1
}
handleChange = () => {
//改变组件属性 虽然写了多个语句但效果还是一部效果
// 不可以实现状态的连续改变
// 改用一下回调函数形式就可实现同步操作 它本质上是异步的
this.setState({
n:this.state.n + 1
},() =>{
// 注意：
// 1、该函数在状态改变完成之后调用 该回调函数运行于render之后
// 今后凡是获取改变后的状态均要使用回调函数形式进行
console.log(this.state.n)
})
}
render() {
console.log('render')
return (
<div>
<span>{this.state.n}</span>
<button onClick={this.handleChange}>+</button>
</div>
)
}
}
Best Practices:
- All the setState as asynchronous
- Never trust the state after setState call because it is asynchronous possible state has not changed
- If the status after the change to be used, it is necessary to use a callback function (the second parameter setState)
- If the new state according to a state before the operation mode is performed using the function changes state (the first function setState)
React asynchronous setState will optimize multiple times setState merge (the multiple state change is complete, then the unity of the state change, then triggers render)
