基本语法

定义组件

render中写入html,可以使用模板，用{}包裹
class App extends React.Compoent{
　const name='ls'
　render(
　　<h2>{name}</h2>
　)
}
这样就生成了一个简单的组件

組件传递props

props通过自定义属性绑定子组件this.props接收
父组件
<App2 body='bb'></App2>
子组件
class App2 extends React.Component{
　 render(){
　　　return(
　　　　　 <h2>I am {this.props.body}</h2>
　　　)
　}
}

函数式组件

props通过参数传递
父组件
<App3 content='content'></App3>
子组件
function App3(props){
　　return (<h3>{props.content}</h3>)
}

state管理内部状态、map渲染数组、constructor初始化构造器、事件、setState更新内部状态

class App4 extends React.Component{
　　constructor(props){
　　　　//必须执行super
　　　　super(props)
　　　　//state不可更改只能通过setState重新覆值
　　　　this.state={
　　　　　　arr:['I','Love','You']
　　　　}
　　}
//click事件绑定了consoles方法，因为consoles方法内部有this，用常规定义方式存在this指向问题，所以用箭头函数定义函数
　 consoles=()=>{
　　　 console.log(hello)
　　　this.setState({
　　　　arr:[...this.state.arr,'yuru'+Math.random()]
　　　})
　 }
　　render(){
　　　　return(
　　　　 <div>
　　　　　　<ul>
　　　　　　　{this.state.arr.map(item=>{
　　　　　　　　return<li key={item}>{item}</li>
　　　　　　　})}
　　　　　　</ul>
　　　　　　 <button onClick={this.consoles}>按钮</button>
　　　　 </div>
　　　 )
　　}
}

生命周期

image.png
image.png