antd-mobile依赖需要自行引入

export default class Parent2 extends Component {
    constructor(props){
        super(props)
//初始化state
        this.state={
            parentVal: 10,
    count=1
    handleClick=()=>{
        this.setState({
            parentVal:this.state.parentVal+1
    changeCount=()=>{
        this.count=this.count+1
        console.log(this.count)
    componentDidMount() {
        console.log("父组件生命周期======：Mount")
    //挂载完成后更新状态值，render()结束后会执行componentDidUpdate()钩子函数
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("父组件生命周期======：Update")
    componentWillUnmount() {
        console.log("父组件生命周期======：Unmount")
    render() {
        console.log("父组件生命周期======：render")
        return (
                <p>{this.state.parentVal}</p>
                <Divider>分割线</Divider>
                <Button   color='primary' size='small' onClick={this.handleClick}>更改state的值</Button>
                <p>父组件调用setState()时，子组件也会执行render()方法，</p>
                <Button   color='primary' size='small' onClick={this.changeCount}>更改count的值</Button>
                <Child2 number={this.state.parentVal} count={this.count}/>
            </div>
2、创建子组件
 
export default class Child2 extends Component {
    constructor(props){
        super(props)
    componentDidMount() {
        console.log("子组件生命周期======：Mount")
    //挂载完成后更新状态值，render()结束后会执行componentDidUpdate()钩子函数
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("子组件生命周期======：Update")
    componentWillUnmount() {
        console.log("子组件生命周期======：Unmount")
    render() {
        console.log("子组件生命周期======：render")
        return (
            <div style={{background:'yellow',padding:20}}>
               <p>父组件state中传值：{this.props.number}</p>
                <p>父组件非state中传值：{this.props.count}</p>
            </div>
这里有两个变量，一个count，不是父组件state中的值，一个numer是父组件state中的值。
 
点击更改‘更改state的值’按钮，父子组件同步刷新，而点击更改count的值按钮，子组件不会刷新
 
原因分析：
 
父组件更改count的值，虽然父组件count值改变，但是不会更改子组件的值，props是单向传递的
 
情况组件挂载生命周期钩子函数执行控制台打印数据
 
 父组件执行setState()结果：
 
 
 
要想让子组件更新dom，必须让子组件执行render()方法，而父组件执行render()方法后，子组件也会执行render()方法，这就是为何父组件调用了setSate()方法，子组件会刷新。
 
 
当更改了count的值，比如count连续加1，变成了9，此时父组件调用this.setState()更改状态值，
 此时子组件的count也变成了9，因为count并没有清除，父子组件又先后调用了render()方法，因此渲染上了最新的props的属性值
 
 
 
如果子组件是函数组件，则render后，count值会变为初始值，那么父组件setState()之后，子组件render()函数执行时收到的还是最初的值，这和子组件是类组件有区别，大家可以自己尝试，
 
解决方案：
 
 
如果想要传递子组件的props改变后刷新子组件dom，就要将父组件的state中的值传给子组件，而不是将普通的变量传递给子组件
 
vue更改props的值子组件会刷新，因为vue中传递给props的值也是父组件状态中的变量
				
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是那么优雅，而且容易出错。所以今天来探讨一下这类实现会产生的问题和更好的实现方案。
何时使用派生状态
import React , { Component } from 'react' ;
import { ScrollSync , ScrollSyncPane } from 'react-scroll-sync' ;
export default class MyComponent extends Component {
    render ( ) {
      < ScrollSync>
        < div xss=removed>
          < Scroll
子组件的代码，其构造函数内初始化了自己全新的state，数据是props传入的data，在render函数内通过this.state取数据，这样当父组件调用setState之后，而子组件state里面的数据并没有发生变化，这就导致子组件并没有去调用render重新渲染页面，这种情况即使是调用forceUpdate方法也没用。
现在的改法是在props...
				
需求：父组件发送请求后，根据返回数据实时更新部分state，子组件实时检测跟随跟新
1、可以使用利用react的componentWillReceiveProps方法
子组件中增加
componentWillReceiveProps(nextProps:any){
     this.setState({
         reuploadFlag: nextProps.reuploadFlag,
         successFlag: nextProps.successFlag,
				
forceUpdate不会导致shouldComponentUpdate的触发4.判断步骤：
如果 PureComponent 里有 shouldComponentUpdate 函数的话，直接使用 shouldComponentUpdate 的结果作为是否更新的依据。没有 shouldComponentUpdate 函数的话，才会去判断是不是 PureComponent ，是的话再去做 shallowEqual 浅比较。
PureComponent不可滥用，他使用在class组件内，只有那些状态和属性不
				
react-native-refresh-list-view
一个基于FlatList的列表下拉、上拉刷新控件。代码一共100多行，尽量写得简单易懂，方便各位根据自己的需求随意修改。
如果有bug或建议，欢迎提issue。
下拉刷新
已加载全部数据
npm install --save react-native-refresh-list-view
下载源码，将RefreshListView.js拖入工程中
运行Demo
进入Example目录，执行：
npm install
react-native run-ios
Example
constructor(props) {
    super(props)
    this.state = {
        refreshState: RefreshState.Idle,
				
useForceUpdate useForceUpdate 是一个 React Hook，它强制您的函数组件重新渲染。
useForceUpdate 本身没有任何用途。
它是一个小包，旨在集成到更大的钩子中，使仍然依赖 this.forceUpdate() 的任何类功能过时。
安装 npm install use-force-update 或 yarn add use-force-update 使用 import React from 'react';
从“use-force-update”导入 useForceUpdate；
导出默认函数 MyButton() { const forceUpdate = useForceUpdate();
const handleClick = React.useCallback(() => { alert('我现在要重新渲染。'); forceUpdate(); }, [forceUpdate]);
返回（重新渲染）；
				
在 React 中，子组件可以通过 props 传递函数到父组件中，从而实现调用父组件的函数。
具体来说，可以在父组件中定义一个函数，然后将该函数作为 props 传递给子组件。在子组件中，可以使用 props 调用父组件中的函数，从而实现父子组件之间的通信。
例如，在父组件中定义一个函数 handleClick，用于在点击按钮时修改 count 值：
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  render() {
    return (
        <ChildComponent onClick={this.handleClick} />
        <div>Count: {this.state.count}</div>
在子组件中，通过 props 获取父组件传递的函数，并在需要的时候调用该函数：
class ChildComponent extends React.Component {
  render() {
    return (
        <button onClick={this.props.onClick}>Click me</button>
此时，点击子组件中的按钮会调用父组件中的 handleClick 函数，从而修改 count 值并更新父组件中显示的值。