react通信方式

React通信方式

1、类式形式（class）

1、 Props

class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'zach'
        }
    }
    render() {
        return (
            <Child name={this.state.name} />
        )
    }
}
------------------
children 组件
import KerwinProp form 'prop-types'

render(){
	return(
	<div>{this.props.name}</div>
  )
}
Children.defaultProps = {
	name:"屈小康"
}
Children.propTypes = {
	name:KerwinProp.string; //
}

2、父组件直接通过refs调用子组件实例的方法。

// Father
myRef = react.createRef();
componentDidMount(){
	this.myRef.current.myFunc();
}
<Children ref={this.myRef}></Children>

// children
myFunc(){
	console.log('1111')
}

3、Callback Functions：子组件给父组件传递信息。（回调函数）

// child
const Child = ({onClick}) =>{
	<div onClick={()=> onClick('屈小康')}>点击</div>
}
// Father
class Father extends React.Component {
	handleClick = (data) =>{
  	console.log('data', data)
   }
   render(){
   		return (
      	<Children onClick={this.handleClick}></Children>
      )
   }
}

4、Context 上下文对象

const ThemeContext = React.createContext();
class App extends React.Componet {
	render(){
		return(
       <ThemeContext.Provider value={{
       	 name:'屈小康'
       }}>	
       	<Children/>
       </ThemeContext.Provider>
        )
	}
}
const Children extends Component {
	render(){
	  return(
      	<ThemeContext.Consumer>
		{(value) =>{
			return(
			  <div>{value.name}</div>
			 )
           }
        }
        </ThemeContext.Consumer>
       )
   }
}

1、函数式HOOKS