第1章、react基础知识；-编程知识

一、react学习前期准备；

1、基本概念；

前期的知识准备：

1.javascript、html、css；

2.构建工具：Webpack：https://yunp.top/init/p/v/1

3.安装node：npm：https://yunp.top/init/p/v/1

4.cnpm命令：http://npm.taobao.org/
官方文档：https://reactjs.org/docs/hello-world.html

二、react jsx语法；

1、jsx语法介绍；

遇到<>按照HTML语法解析，遇到{}按照JavaScript

三、react元素渲染；

import React from "react"
import Home from "./Home"
import MyNav from "./MyNav"
import StateComponent from "./StateComponent";
import ComponentLife from "./ComponentLife"
import SetStateDemo from "./setStateDemo"
import IfDemo from "./ifDemo"
import KeyDemo from "./KeyDemo"
import FormDemo from "./FormDemo"
import RefsAndDOM from "./RefsAndDOM"
import RefsForm from "./RefsForm"
import Parent from "./components/parent"
import Compose from "./compose"
import PropsTypeDemo from "./PropsTypeDemo"// 用类的形式创建组件，Hook形式
class App extends React.Component{constructor(){super();this.state = {title:"文本1"}}clickChange = (data) =>{this.setState({title:data})}// 渲染函数render(){// const nav1 = ["首页","视频","学习"];// const nav2 = ["WEB","Java","Node"];return(<div>{/* <h1>Hello React Component</h1><h3>学习React，最重要的是，心态要好!</h3><Home /><MyNav nav={ nav1 } title="路径导航"/><MyNav nav={ nav2 } title="学习导航"/> */}{/* <StateComponent /> */}{/* <ComponentLife title={ this.state.title } clickChanges={ this.clickChange }/> */}{/* <SetStateDemo /> */}{/* <IfDemo /> */}{/* <KeyDemo /> */}{/* <FormDemo /> */}{/* <RefsAndDOM /> */}{/* <RefsForm /> */}{/* <Parent /> */}{/*<Compose><div>我是组合效果</div></Compose> */}{ <PropsTypeDemo />}</div>)}
}export default App

四、react组件基础之创建组件；

import React from "react"export default class Home extends React.Component{constructor(props){super(props);// this.clickHandler = this.clickHandler.bind(this);}clickHandler(element,event){// this无指向// console.log(this);console.log(element,event);}// apply call bind:面试常见问题render(){const names = ['iwen','ime'];return(<div>Home  {/* <button onClick={ this.clickHandler.bind(this) }>按钮</button> */}{/* <button onClick={ this.clickHandler }>按钮</button> */}{/* <button onClick={ (e) => {this.clickHandler(e)}}>按钮</button> */}<ul>{names.map((element,index) => {// return <li onClick={ this.clickHandler.bind(this,element) } key={index}>{ element }</li>return <li onClick={ (e) => this.clickHandler(element, e) } key={index}>{ element }</li>})}</ul></div>)}
}

五、react props属性；

import React from "react"// props不可以被修改
export default class MyNav extends React.Component{render(){return(<div>{/* jsx语法 */}<h3>{ this.props.title }</h3><ul>{this.props.nav.map((element,index) =>{return <li key={index}>{ element }</li>})}</ul></div>)}
}

六、react state 状态；

import React from "react"export default class StateComponent extends React.Component{/*** 组件中的状态：state* 以前我们操作页面的元素的变化，都是修改DOM，操作DOM* 但是有了React优秀的框架，我们不在推荐操作DOM，页面元素的改变使用State进行处理*/constructor(props){super(props);// 定义this.state = {count:10,flag:true}}increment(){// setStatethis.setState({count:this.state.count+=1})}decrement(){this.setState({count:this.state.count-=1})}clickHandler = () =>{console.log(this);}render(){let showView = this.state.flag ? '我是孙悟空' : '我是假的孙悟空'return(<div><h3>组件的State</h3><p>{ this.state.count }</p><button onClick={ this.increment.bind(this) }>增加</button><button onClick={ this.decrement.bind(this) }>减少</button><button onClick={ this.clickHandler }>关于this</button><p>{ showView }</p></div>)}
}

七、react组件生命周期函数；

1、基本概念；

componentWillMount 在组件渲染之前执行；
componentDidMount 在组件渲染之后执行；
shouldComponentUpdate 返回true和false，true代表允许改变，false代表不允许改变；
componentWillUpdate:数据在改变之前执行(state,props)；
componentDidUpdate:数据修改完成(state,props)；
componentWillReveiceProps:props发生改变执行；
componentWillUnmount 组件卸载前执行；

2、代码；

import React from "react"export default class ComponentLife extends React.Component{constructor(props){super(props);this.state = {count:10}}componentWillMount(){console.log("componentWillMount");}componentDidMount(){console.log("componentDidMount");}shouldComponentUpdate(){console.log("shouldComponentUpdate");return true;}componentWillUpdate(){console.log("componentWillUpdate");}componentDidUpdate(){console.log("componentDidUpdate");}componentWillReceiveProps(){console.log("componentWillReceiveProps");}componentWillUnmount(){console.log("componentWillUnmount");}changeHandler = () =>{this.setState({count:this.state.count+=1})}clickChange = () => {this.props.clickChanges('我是儿子的数据');}render(){const { count } = this.state;return(<div>生命周期函数:{ count } - { this.props.title }<button onClick={ this.changeHandler }>修改</button><button onClick={ this.clickChange }>修改title</button></div>)}
}

八、react setState 是同步还是异步；

import React from "react"export default class SetStateDemo extends React.Component{constructor(){super();this.state = {count:0}}// 01.异步increment1(){this.setState({count:this.state.count+1});console.log(this.state.count);}// 02.官网的解决方案increment2(){this.setState({count:this.state.count+1},() => {console.log(this.state.count);})}// 03.利用 promise 和 async/await 把异步改成同步async increment3(){await this.setStateAsync({count:this.state.count+1});console.log(this.state.count);}setStateAsync(state){return new Promise((resolve) =>{this.setState(state,resolve);})}render(){return(<div>setState同步还是异步问题<p>{ this.state.count }</p><button onClick={ this.increment1.bind(this) }>修改1</button><button onClick={ this.increment2.bind(this) }>修改2</button><button onClick={ this.increment2.bind(this) }>修改3</button></div>)}
}

九、react 条件渲染；

import React from "react"export default class IfDemo extends React.Component {/*** 常用的应用常见：*  1.对视图条件进行切换*  2.做缺省值*/constructor() {super();this.state = {isLogin: false,names: ["ime"]}}clickHandler = () => {this.setState({isLogin: true})}render() {const { names } = this.state;let showView = this.state.isLogin ? <div>iwen</div> :  <div>请登录</div>;return (<div>条件渲染:{showView}<button onClick={this.clickHandler}>登录</button>{names.length > 0 ?<div>{names.map((element, index) => {return <p key={index}>{element}</p>})}</div>:<div>请等待数据正在请求....</div>}</div>)}
}

十、react列表渲染key；

1、基本概念；

前key代表唯一索引，索引没有变化ui不会重绘，只有key发生变化才会发生重绘；

import React from "react"export default class KeyDemo extends React.Component{constructor(){super();this.state = {userinfo:[{name:"frank",age:20,sex:"男",jobs:['后端']}]}}clickHandler = () =>{this.setState({userinfo:this.state.userinfo.concat([{name:"sakura",age:30,sex:"女",jobs:['前端']}])})}render(){return(<div><ul>{this.state.userinfo.map((element,index) =>{return(<li key={ index }><span>姓名：{ element.name }</span><span>年龄：{ element.age }</span><span>性别：{ element.sex }</span><div>职业：{element.jobs.map((childElement,childIndex) =>{return <span key={ childIndex }>{ childElement }</span>})}</div></li>)})}</ul><button onClick={ this.clickHandler }>添加数据</button></div>)}
}

十一、react表单受控组件；

import React from "react"export default class FormDemo extends React.Component{constructor(){super();// 表单的值是受控组件this.state = {value:""}}handleSubmit = (e) =>{// 表单事件默认跳转，阻止事件e.preventDefault();console.log(this.state.value);}onChangeHandler = (e) =>{this.setState({value:e.target.value})}render(){return(<div><form onSubmit={this.handleSubmit}><input type="text" value={ this.state.value } onChange={ this.onChangeHandler }/><input type="submit" value="提交"></input></form></div>)}
}

十二、React RefsDom；

import React from "react"export default class RefsAndDOM extends React.Component{constructor(){super();// 创建一个获取dom对象this.HelloDiv = React.createRef();this.spanText = React.createRef();}// ui已经渲染完成，dom是存在componentDidMount(){this.HelloDiv.current.style.color = "red";this.spanText.current.style.color = "red";}render(){return(<div><div ref={ this.HelloDiv }>Hello</div><div ref={ this.spanText }><span>这是文本信息</span></div></div>)}
}

十三、react表单非受控组件；

import React from "react"export default class RefsForm extends React.Component{constructor(){super();this.username = React.createRef();this.password = React.createRef();}clickHandler = (e) =>{console.log("username",this.username);console.log(this.username.current.value);console.log(this.password.current.value);}render(){return(<div><input type="text" ref={ this.username }/><input type="text" ref={ this.password }/><button onClick={ this.clickHandler }>提交</button></div>)}
}

十四、react 状态提升；

// 父组件：parent
import React from "react"
import Child1 from "./child1"
import Child2 from "./child2"export default class Parent extends React.Component{constructor(){super();this.state = {money:1}}changeHandler(e){this.setState({money:e.target.value})}  render(){return(<div><div>parent:<input type="text" value={ this.state.money } onChange={this.changeHandler.bind(this)} /></div><div><Child1 money={ this.state.money }/></div><div><Child2 money={ this.state.money }/></div></div>)}
}

// 子组件1：child1
import React from "react"export default class Child1 extends React.Component{constructor(){super();this.state = {input1:0}}componentDidMount(){this.setState({input1:this.props.money})}changeHandler(e){this.setState({input1:e.target.value})}render(){return(<div>人民币：<span>{this.props.money}</span><input type="text" value={ this.state.input1 } onChange={ this.changeHandler.bind(this) }/></div>)}
}

// 子组件2
import React from "react"export default class Child2 extends React.Component {constructor(){super();this.state = {input2:0}}componentDidMount(){this.setState({input2:this.props.money * 7})}changeHandler(e){this.setState({input2:e.target.value})}render() {return (<div>美元<span>{this.props.money * 7}</span><input type="text" value={ this.state.input2 } onChange={this.changeHandler.bind(this)} /></div>)}
}

十五、react 组件组合；

import React from "react"/**<Compose><div>我是组合效果</div></Compose> 
**/export default class Compose extends React.Component{render(){return(<div>哈哈哈:{ this.props.children }</div>)}
}

十六、react PropsType 组件验证；

import React from 'react'
import PropTypes from 'prop-types';export default class PropsTypeDemo extends React.Component{render(){return(<div>Hello:{ this.props.title }</div>)}
}// PropsTypeDemo.propTypes = {
//     title:PropTypes.number.isRequired
// }PropsTypeDemo.propTypes = {title:PropTypes.string.isRequired
}// PropsTypeDemo.defaultProps = {
//     title:'默认值'
// }