ReactJS实战之组件通信

// 基础组件写法

function Component(){

return

I am sss

}

class ES6Component extends React.Component{

render(){

return

I am sss in es6

}

}

ReactDOM.render(

,

document.getElementById(‘app’)

);

// status && props

class Component extends React.Component{

constructor(props){

super(props);

}

render(){

setTimeout(()=>{

this.setState({

name: ‘sss Test’

})

},2000)

return

I am {this.state.name}

}

}

ReactDOM.render(

,

document.getElementById(‘app’)

);

// 事件处理方式1

class Component extends React.Component{

constructor(props){

super(props);

this.state={

name : ‘sss’,

age : 18

}

this.handleClick = this.handleClick.bind(this)

}

handleClick(){

this.setState({

age : this.state.age + 1

});

}

render(){

return (

I am {this.state.name}

I am {this.state.age} years old!

加一岁

);

}

}

// 事件处理方式2

class Component extends React.Component{

constructor(props){

super(props);

this.state={

name : ‘sss’,

age : 18

}

}

handleClick(){

this.setState({

age : this.state.age + 1

});

}

onValueChange(e){

this.setState({

age : e.target.value

});

}

render(){

return (

I am {this.state.name}

I am {this.state.age} years old!

<button onClick={(e) => {this.handleClick(e)}}>加一岁

<input type=“text” onChange={(e) => {this.onValueChange(e)}}/>

);

}

}

// 组件的组合方式

class Component extends React.Component{

constructor(props){

super(props);

this.state={

name : ‘sss’,

age : 18

}

}

handleClick(){

this.setState({

age : this.state.age + 1

});

}

onValueChange(e){

this.setState({

age : e.target.value

});

}

render(){

return (

I am {this.state.name}

I am {this.state.age} years old!

<button onClick={(e) => {this.handleClick(e)}}>加一岁

<input type=“text” onChange={(e) => {this.onValueChange(e)}}/>

);

}

}

class Title extends React.Component{

constructor(props){

super(props);

}

render(props){

return

{this.props.children}

}

}

class App extends React.Component{

render(){

return (

{/* 容器式组件 */}

App Span

link

---

最后

手绘了下图所示的kafka知识大纲流程图（xmind文件不能上传，导出图片展现），但都可提供源文件给每位爱学习的朋友

class App extends React.Component{

render(){

return (

{/* 容器式组件 */}

App Span

link

---

最后

手绘了下图所示的kafka知识大纲流程图（xmind文件不能上传，导出图片展现），但都可提供源文件给每位爱学习的朋友

[外链图片转存中…(img-aFZnsdmS-1714439159558)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录