React 起步

1.安装react脚手架

npm i create-react-app
create-react-app appName
cd appName
npm start

2.react项目文件

index.html是根目录文件
index.js中得render函数将跟组件挂载到index.html中得跟元素root中

index.js

import React from 'react';
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App/>,document.getElementById("root"));

3.App组件。

import React,{Components} from 'react'
var App=()=>{
    return  (
        <div>Hello React</div>
    )
}

export default App
//注意在写子组件的时候，子组件最外层必须要有一个大标签包裹，但flex布局的时候不需要最外层的表情可以考虑用Fragment代替
//import React ,{Fragment}from 'react';

还可以写成

class App extends Component{
    render(){
        return (
            <ul className="my-list">
                <li>{false?'JSPang.com':'技术胖'}</li>
                <li>I love React</li>
            </ul>
        )
    }
}

不过函数式组件写法比较简洁还是用函数式写法
然后运行就会出现Hello React了

JSX简介

JSX中需要注意几点
1.HTML 中的class要写成className
2.HTML 中的for要写成HtmlFor
3.为了将组件和普通HTML元素区分，切记!!自己的写的组件首字母一定要大写
4.在jsx中{}里面是JavaScript代码  <>里面是HTML代码

react类式编程中的constructor

 constructor(props)
    {
        super(props);//调用父类的构造函数，固定写法
        this.state={
        //相当于VUE中的data
            inputValue:"",
            list:[]
        }
    }

react数据绑定

<input value={this.state.inputValue}></input>

react事件绑定

react中要注意this的指向问题，推荐使用箭头函数做事件绑定

<!---注意写箭头函数的时候，必须写参数e才有效，虽然我也不知道为啥--->
<input value={this.state.inputValue} onChange={(e)=>this.changeText(e)}></input>

如果不用箭头函数，就要改变this的指向，十分麻烦

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)}></input>

changeText(e)
    {
        this.setState({
            inputValue:e.target.value
        })
        //console.log(e.target.value);
    }

react修改state

deleteItem(e)
    {
        //切记不能直接修改this.state.list
        //要把this.state.list赋给一个变量然后再写回去
        
    }

react父子组件传值

//父组件
<TodoItem data={this.state.list}>

//子组件接收
import React, { Component } from 'react';
class TodoItem  extends Component {
   
    render() { 
        return ( 
            <div>
                    {this.props.data}
            </div>
        );
    }
}
 
export default TodoItem;

react子组件向父组件传值
react规定子组件不能向父组件传值，因为react是单向数据流，但是可以借助父组件的方法来修改父组件的值

//父组件
//其中deleteItem是传递的方法
{this.state.list.map((item,index)=>{
                    return (
                    {/*注意在return中使用组件需要用div包裹的时候
                    把key写在div上
                    */}
                        <div key={item+index}>
                        <TodoItem 
                        
                        item={item}
                        index={index}
                        deleteItem={(index)=>this.deleteItem(index)}
                        />
                        </div>
                    
                    )
                })}

//子组件
import React, { Component } from 'react';
class TodoItem  extends Component {
   
    render() { 
        return ( 
            <div onClick={(e)=>this.handleClick(e)}>
                    {this.props.data}
            </div>
        );
    }
    handleClick(e)
    {
        this.props.deleteItem(this.props.index)
    }
}
 
export default TodoItem;

react中传值时的数据校验

//相当于vue 中的type
//首先要引入校验工具
import PropTypes from 'prop-types'
//校验规则
TodoItem.propTypes={
    item:PropTypes.string.isRequired,
    deleteItem:PropTypes.func,
    index:PropTypes.number
}
//默认数据
TodoItem.defaultProps={
    name:'simple'
}

reacr生命周期

//react分为四大阶段
1.Initialization:初始化阶段->定义属性(props)和状态(state)
2.Mounting:挂载阶段->生成虚拟DOM
(1)componentWillMount : 在组件即将被挂载到页面的时刻执行。
(2)render : 页面state或props发生变化时执行。
(3)componentDidMount: 组件挂载完成时被执行。
3.Updating:更新阶段
(1)shouldComponentUpdate:函数会在组件更新之前，自动被执行。它要求返回一个布尔类型的结果，必须有返回值，这里就直接返回一个true了（真实开发中，这个是有大作用的）。
shouldComponentUpdate有两个参数：

nextProps:变化后的属性;
nextState:变化后的状态;
shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content !== this.props.content){
        //减少为变化组件的渲染
        return true
    }else{
        return false
    }

}
(2)componentWillUpdate: componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。
(3)componentDidUpdate: 在组件更新之后执行，它是组件更新的最后一个环节。
(4)componentWillReceiveProps:字面意思
4.Unmounting:销毁阶段  
componentWillUnmount，它是在组件去除时执行。