携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

呀呀呀，昨天忙着和朋友交谈，忘记更新我的复盘笔记了，断了了我的连更啊，今天补上吧

正文开始啦——————————————

初识React

1.了解React

⽤于构建⽤户界⾯的 JavaScript 库
学习React需要⽐较牢固的JS基础和熟悉ES6语法
React没有太多的api，可以说⽤react编程都是在写js

2.准备

1)安装node.js环境 npm 是node.js⾃带的包管理⼯具

npm install webpack -g 全局安装webpack

3)安装官⽅create-react-app脚⼿架并搭建项⽬ (1)全局安装脚手架命令

npm isntall -g create-react-app
或者
yarn add create-react-app -g

(2)安装后查看版本

create-react-app --version

(3)开始创建项目

create-react-app 项目名称

(4)启动项目

进入对应的项目里面 npm start或yarn start

React特性

1.React设计之初就是使⽤JSX来描述UI，所以解耦了和DOM的操作

react只做逻辑层
react-dom做渲染层，去渲染实际的DOM

2.JSX的实质 JSX语法即JS和html的混合体，实际的核⼼逻辑就是⽤js去实现的

//JSX实际的写法
class HelloMessage extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            "Hello ",
            this.props.name
        );

    }

}

ReactDOM.render(React.createElement(HelloMessage, {
    name: "Taylor"
}), document.getElementById('hello example'));

//react
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById("hello-example")
);

React的基础知识

1.state和setState

//初始化状态
this.state = {
    count: 0
}; 

//更新数据状态
this.setState((prevState, prevProps)=>({
//prevState：上⼀次修改的状态state
//prevProps：上⼀次修改的属性props
count: prevState.count + 1
}), () => {
    //这⾥可以获取到最新的state
    console.log(this.state.count);
});

2.props属性传递

//⽗组件传⼊name属性
<PropsDemo name="我是喵崽"></PropsDemo>
 


//⼦组件使⽤
//class组件使⽤this.props接住
<h1>{this.props.name}</h1>

//函数型组件使⽤
function xxx(props){
return <h1>{props.name}</h1>
}

//解构赋值写法
function xxx({name}){
return <h1>{name}</h1>
}

3.条件渲染

//直接展示  三目表达式
{this.state.showName?<h1>{this.props.title}</h1>:null}

//在render函数⾥定义⼀个变量装载结果
let result=this.state.showTitle?<h1>{this.props.title}</h1>:null
//渲染结果
{result}


//直接使⽤if else写
let result
 if(this.state.showTitle){
   result=(<h1>this.props.title</h1>)
}else{
   result=null
}
//渲染结果
{result}

4.事件监听以点击事件为例

//⼩驼峰写法，事件名⽤{}包裹
<button onClick={}></button>
//由于react的this指向问题，所以在事件绑定时要特别注意，否则会出现bug

第⼀种利⽤bing绑定，写法如下，这种⽐较少⽤

//在constructor⾥⾯利⽤bing绑定继承this，解决⽅法的this指向问题

constructor(props) {
super(props);
this.showTitleFun =this.showTitleFun.bind(this);
}

showTitleFun(){
//执⾏某些操作
this.setState({})
}

//在DOM元素上直接使⽤
<button onClick={this.showTitleFun}>不显示title</button>

第⼆种箭头函数写法

showTitleFun = () => {

//执⾏某些操作
this.setState({});
};

//在DOM元素上直接使⽤
<button onClick={this.showTitleFun}>不显示title</button>

第三种直接使⽤箭头函数返回⼀个函数

showTitle(){
//执⾏某些操作
this.setState({});
};

<button onClick={() => this.showTitleFun()}>不显示title</button>

5.样式的编写

⾏内样式写法

<img style={{ width: "100px",height:"100px" }} />

添加类名

<img className="img" />

添加属性

<img src={logo} />

6.双向数据绑定

动态绑定value属性

//在state⾥⾯定义⼀个变量绑定input的value属性
this.state={
inputval:'我是input的初始值'
}

//然后在input⾥动态绑定上⾯定义的变量
<input type="text"value={this.state.inputval}/>

监听input的onChange事件

//定义onChange绑定的事件

inputvalChange = e => {
   this.setState({
     text: e.target.value
   });
}

//在input上绑定绑定inputvalChange到onChange上
<input type="text" value={this.state.inputval}
onChange={e =>this.inputvalChange(e)}

React组件⽣命周期

componentWillMount 组件将要挂载
componentDidMount 组件已经挂载
componentWillReceiveProps ⽗组件传递的属性有变化，做相应响应
shouldComponentUpdate 组件是否需要更新，返回布尔值，优化点
componentWillUpdate 组件将要更新
componentDidUpdate 组件已经更新
componentWillUnmount 组件已经销毁

「掘金日新计划 · 8 月更文挑战」的第7天—react的基础回顾上

1.了解React

2.准备

React特性

React的基础知识

React组件⽣命周期