Recently, I took over other people's react project. I haven't done react before, and I haven't learned it. Through these two days'general study, I summarized some small knowledge points.
1. First, dva: You can connect the template layer with the data layer, which looks clearer. Specific can be seen on the official website. Note that

• Several parameters in effects

What the hell is it: Let's take an example.

        // Pull-up loading of news list
        * news_loadMore({ payload }, { call, put, select }) {
            const { page, stock_code } = payload;
            const { news_list } = yield select(_ => _.stock_info);
            const data = yield call(request, {
                api: 'get_stock_info',
                stock: stock_code,
                platform: 'news',
                page: page,
            });
            if (data.code === 200) {
                if (data.result.data.length > 0) {
                    let arr = news_list.slice(0);
                    arr = arr.concat(data.result.data);
                    yield put({ type: 'save', payload: { news_list: arr,news_page:page } });
                    payload.callback(true);
                } else {
                    payload.callback(false);
                }
            }
        },

payload is the parameter passed when calling the function, which is equivalent to the parameter of the function.
Call: Used as a call interface to support promise
put: To distribute actions. In the example, when the length of the list is greater than 0, distribute save events and store the list. That is to say, distribute synchronous events in reducers, which is equivalent to action drinking mutation in vue.

   reducers: {
        save(state, { payload }) {
            return {
                ...state,
                ...payload,
            };
        },
    },

Also, select can get a state value under a model: the top is correctly written, or it can be written like this
const num = yeild.select(state => state..title)
2. Let's talk about conditional rendering*:
In vue, the first thing we think about when we render conditionally is v-if, v-esle-if, v-show. Used to determine whether the template is displayed under certain conditions
In react, our conditional rendering requires a trinomial operator
For example:

div className='tabs_item' style={{backgroundImage: 'linear-gradient(221deg, #2D3647 0%, #131621 100%)'}}>
                        {
                            word_cloud_data.length>0?<WordCloud  {...word_cloud_props}/>:<div className='nodata'>No data available for the time being</div>
                        }
                    </div>

3. How to change the data in state
You can't modify state directly. this.state.title='aaaa'/// is wrong. It can't change the title value.
Only through this.setState({title:'123'})
4. Life cycle
Usually these are used.
componentDidMount
Called after the first rendering, only on the client side. Then the component has generated the corresponding DOM structure, which can be accessed through this.getDOMNode(). If you want to work with other JavaScript frameworks, you can call setTimeout, setInterval, or send AJAX requests in this method (to prevent asynchronous operations from blocking the UI).

class Demo extends Component {
  	constructor(props, context) {
      	    //If you want to use props or context (which can be directly received elsewhere in the component), you need to pass it in as a parameter.
      	    //As long as the component has constructor, it is necessary to write super, otherwise this pointing will be wrong.
      	    super(props, context);
      	    this.state = {
          	    data: 1
      	    };
  	},
	componentWillMount () {
		// Called before the component is mounted and only once globally. If you can set State in this hook, you can see the updated state after render without triggering duplicate rendering.
		// This life cycle can initiate asynchronous requests and set State. (React v16.3 discards the life cycle and can complete setting state in the constructor)
		// It is not recommended to initiate ajax requests here. If the returned data is empty, it will easily create a blank interface and affect the rendering effect.
	},
	componentDidMount () {
		//When the first rendering of the component is complete, the dom node has been generated, where the ajax request can be invoked, and the component will be rendered again after the data setState is returned.
	},
	componentWillReceiveProps (nextProps) {
		// props that accept changes in parent components need to re-render components more often
		// By comparing nextProps with this.props, the nextProps setState is used as the state of the current component to re-render the component.
		nextProps.data !== this.props.data && this.setState({
	        data: nextProps.data
		    }，() => {
		      console.log("new data...");
	  	});
 
	},
	shouldComponentUpdate (nextProps, nextState) {
		// Reaction performance optimization is a very important part.
		// When a component accepts a new state or props, we can set whether the two props and the state are the same before and after the comparison.
		// If the same, return false to prevent updates, because the same attribute state will certainly generate the same dom tree.
		// In this way, there is no need to create a new dom tree to compare with the old dom tree for diff algorithm, which saves a lot of performance, especially when the dom structure is complex.
	},
	componentWillUpdate (nextProps, nextState) {
		// Component initialization is not invoked, only when component updates require re-rendering
	},
	componentDidUpdate (prevProps, prevState) {
		// When the component is initialized, it is not called. When the component is updated and rendered, it is called. When the dom node is loaded, the dom node can be obtained.
		// react will only enter component Didmount if it succeeds in the first initialization.
		// After each re-rendering, it will enter the life cycle, where you can get prevProps and prevState, that is, pre-update props and state.
		// setState in the hook may trigger repeated rendering, which requires careful judgment, otherwise it will go into a dead cycle. 
	},
	render () {
	    return (
	        <div>This is Demo!</div>
	    );
	},
	componentWillUnmount () {
		// Components are called when they are about to be unloaded, and some event listeners and timers need to be cleared at this time.
	},
	componentDidCatch (error, info) {
    	//React 16 was introduced to capture component errors.
    	//If the render() function throws an error, it triggers the function.
    	//Errors are caught in the rendering phase, but not in the event handler.
    }
}
--------------------- 

5. Cycle
The v-for is recycled in vue, but there is no instruction in react. So we need to use es6 traversal methods: map, forEach, etc.
. . . . . . . . . . . . . .
Not finished yet!