react part
1. The props attribute
Props is an external parameter that is used to pass data from the parent component to the child component. It is readable and immutable. Only the external component can actively pass in new props to re-render the child component, otherwise the props and presentation of the child component will not change.
// Parent class Farther extends React.Component{state = {test:'I'm the parent component'
};
render() {
return (
<Children test={this.state.test} />)}} class Children extends React.Component {render() {// Const {propstest} = this.props
return (
<div>{test}</div>
)
}
}
Copy the code2. State property
State, as the name implies, is the state, which is only used to control the state of the component itself. We can use state to complete the control of behavior, data update and interface rendering.
SetState updates are asynchronous. Event handler setState does not update this.state synchronously
Bottom line: Use props as much as possible and as little state as possible. React encourages us to write functional components because it makes code maintenance easier and also makes components more reusable to some extent.
3. Life cycle
- componentDidMount
The call is not executed until the component is fully mounted to the web page, ensuring that the data is loaded. This method is used to load external data, or to handle other side effects. The setState method called in this method triggers a rerender
Note: ComponentDidMount (component.props) cannot get parameters from this. Props because the function to get server parameters is called asynchronously, and the initial value is obtained during component initialization. When the asynchronous function is executed, the value changes. The argument is passed to the child component, so the function executed after the component is mounted can be retrieved in Render.
React does not allow setState in componentDidMount because updating the state after the component is mounted will trigger a second Render () call and may cause property/layout jitter. (the original:Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing.)
- componentDidUpdate
This life cycle is executed after the component update ends and not when render is initialized. Use: When I need a father the son a parameter, when entering a page to determine whether the popup window, due to the use of componentDidMount can’t get this. Props. Data, using componentWillReceiveProps would I change this method is invoked when the state once, So componentDidUpdate
componentDidUpdate(prevProps, prevState) { <! -- Must give a judgment condition, otherwise it will be an endless loop -->if(prevProps.data ! == this.props.data) { const { data } = this.props;if(data) { this.setState({ data }); }}}Copy the codeConclusion: The React function requires this.setState(state) every time it updates a component (or data). The React function automatically calls the componentDidUpdate() hook after calling setState(). If you have an action that you want to take every time you update it, you can write it in this hook.
- render
We often see render executed many times, usually with the following:
2. SetState Changes the internal state of the component. Render once whenever setState is triggered 3. Accept new propsCopy the codeNote: Normally we will render three times, first loading, Render when componentDidMount sends ajax, and get render in response
The above is used in my project life cycle, specific life cycle can see www.cnblogs.com/qiaojie/p/6…
4. Event binding
(1) Use bind to bind this in the constructor
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('I'm clicking');
}
render() {
return( <button onClick={this.handleClick}> Click me </button> ); }}Copy the code(2) Use bind to bind this when called
class Button extends React.Component {
handleClick(){
console.log('I'm clicking');
}
render() {
return( <button onClick={this.handleClick.bind(this)}> Click me </button> ); }}Copy the code(3) Bind this with the arrow function when called
class Button extends React.Component {
handleClick(){
console.log('I'm clicking');
}
render() {
return( <button onClick={()=>this.handleClick()}> Click me </button> ); }}Copy the code(4) Bind this syntactically using the property initializer (experimental)
class Button extends React.Component {
handleClick=()=>{
console.log('I'm clicking');
}
render() {
return( <button onClick={this.handleClick}> Click me </button> ); }}Copy the codeConclusion: Mode 1 is the official recommended binding mode and has the best performance. Methods 2 and 3 have a performance impact and can cause re-shading issues when methods are passed as attributes to child components. Mode 4 is an experimental syntax for now, but is the best binding method, requiring bable translation. I’m more used to method 4
dva part
Dva is a data flow solution based on Redux and Redux-Saga. In order to simplify the development experience, DVA also has additional built-in React-Router and FETCH, so it can also be understood as a lightweight application framework. Dva consists of the following components:
1. Define the Model
import { concernDelete } from '@/services/api';
export default {
namespace: 'list'}, {data: [],},}, {// This is the property of the redux-saga framework: {*remove({payload}, {call, put}) {const response = yield call(concernDelete, Payload) // The put function is used to send the yield put({type: 'delete', payload: payload, }); },}, // Reducers is equal to the reducer in redux, accept the action and update the state reducers synchronously: {const idx = state.concerns. FindIndex (item => item.id == payload-id); state.concerns.splice(idx, 1);returnstate; ,}}};Copy the codeNote:
Effect: is equivalent to the dispatch function in redux framework. After putting an action, the reducer will calculate the new state and return it. Note that put is also a blocking effect.
call(fn, … Args) : a function that can call other functions. It commands middleware to call fn. Args is the argument to this function. The fn function can be a Generator or a normal function that returns a Promise, and the call function is also a blocking effect.
2. Write the UI Component
const columns = [
{
title: 'name',
dataIndex: 'title', render: (... text) => <List.Item>{text[1].name}</List.Item>, }, { title:'management',
dataIndex: 'manage', render: (... text) => { const editAndDelete = (key, rowKey) => {if (key === 'edit') this.showEditModal(rowKey);
else if (key === 'delete') {
Modal.confirm({
title: 'Delete people you care about',
content: 'Are you sure to delete the people you care about? ',
okText: 'confirm',
cancelText: 'cancel', onOk: () => this.deleteItem(text[1].id, text[1].isMainPerson), }); }};return (
<List.Item
actions={[
<a
data-key="edit"
onClick={e => {
e.preventDefault();
this.showEditModal(text[1], { edit: 'edit'}); }} > Edit </a>, <a data-key="delete"onClick={e => { e.preventDefault(); const { parentNode: { parentNode: { parentNode: { parentNode: { parentNode: { dataset: { rowKey }, }, }, }, }, }, } = e.target; editAndDelete(e.target.dataset.key, rowKey); }} > delete </a>,]} />); }},];Copy the code3. Connect together
@connect(({ list, loading }) => ({
list,
loading: loading.models.list,
}))
class BasicList extends PureComponent {
state = {
selectedRows: [],
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'list/fetch', payload: { isDeleted: Callbak // callback(res){// console.log(res) //}}); }Copy the code4. Modify the antD style
The antD style can be modified with :global, as shown in the code:
:global(.ant-form-item) {
min-width: 545px;
display: flex;
:global(.ant-form-item-control-wrapper) {
margin-left: 60px;
width: 408px;
input {
height: 36px;
line-height: 36px;
}
}
:global(.ant-form-item-label) {
label {
font-size: 14px;
color: # 808184;}}}Copy the codeTo be continued..