2020-07-22

react

特点

1. 申明式写法
2. 组件化
3. 一次学习，随处编写

基本操作

创建新的项目

npx create-react-app my-app
cd my-app
npm start

通过bind(this)来将方法中的this绑定为组件名

//优化
//可以在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 
})

css样式

add
//或者
add
//然后在style.css文件中
.red-btn{
backgroup:red;
color:write;
}
//然后在index.js中加入
import './style.css';

可以用来代替组件中最外层需要的