react
特点
- 申明式写法
- 组件化
- 一次学习，随处编写
基本操作
创建新的项目
npx create-react-app my-app
cd my-app
npm start
通过bind(this)来将方法中的this绑定为组件名
<button onClick={this.HandleBtnClick.bind(this)}></button>
//优化
//可以在constructor中写
this.HandleBtnClick=this.HandleBtnClick.bind(this)
//如此下面的相同代码就不用了bind(this)了
通过setState来改变组件中state中的数据
this.setState({name:''})
生命周期
1.组件初始化
会执行componentDidMount();
2.组件更新
会执行componentDidUpdate();
3.组件卸载
会执行componentWillUnmount();
react生命周期.PNG
组件传值
父组件通过属性的形式向子组件传递参数，子组件通过props接受父组件传过来的参数
子组件若想和父组件通信，则需要使用父组件传递过来的方法
//子组件
HandleSonClick(index){
this.props.delete(index)
}
//父组件
this.state.list.map((item,index)=>{
return <TodoItem delete={this.HandleItemClick.bind(this)} key={index} content={item} index={index}/>
})
css样式
<button style={{backgroup:'red',color:'write'}}>add</button>
//或者
<button className={'red-btn'}>add</button>
//然后在style.css文件中
.red-btn{
backgroup:red;
color:write;
}
//然后在index.js中加入
import './style.css';
<React.Fragment>
可以用<React.Fragment>来代替组件中最外层需要的<div>
