React初识

对于一直使用angular的我，感觉react和angular之间的编写和思想还是有很多不同的地方，这也是我选择学习react的原因。写这篇文章，也希望通过一些小案例，帮助和我一样的react小白更好的了解它~

react有什么优点

• 生态强大
• 上手简单
• 社区强大

react环境搭建

① 首先进行本地的node安装
② 安装react的脚手架   npm install -g create-react-app
③ 创建我们的第一个实验项目  create-react-app react-demo
创建成功之后，关于项目目录，其实和其他的框架是差不多的， 主要是index.js : 这个就是项目的入口文件，第一次尝试我们可以改改这里的代码~

HelloWorld组件的初尝试

react的组件化开发主要使用的JSX语法，在写helloworld之前，先简单的介绍一下JSX.

• JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到" < " JSX就当作HTML解析，遇到" { "就当JavaScript解析
  jsx中的一些小坑
• 在jsx中添加class的时候，react为了和js中的class冲突，所以使用的是“className”
• 在jsx中需要解析html的时候需要使用dangerouslySetInnerHTML 例子："<"li dangerouslySetInnerHTML={{__html:item}}>"

react是组件化编写
import React, {Component} from 'react' // 引入React中必要的文件
class App extends Component{ // App是组件，react中的组件都是大写字母开头
    render(){
        return (
           // return中只能有一个根标签，当不希望渲染额外标签时，可以用<> 或者<React.Fragment>进行包裹
            <div>
                Hello World
            </div>
        )
    }
}
export default App;

react的进阶实例（响应式设计和数据绑定）

react是不建议直接操纵DOM元素的， 更提倡数据驱动，通过改变数据可以完成页面的更新。

class TodoList extends Component {
  constructor(props){
    super(props)  // 调用父类的构造函数，固定写法
    this.state={  // 定义需要使用的到的变量，
        inputValue:'' , // input中的值
        list:['学习Angular', '学习React']   //列表内容
    }
    // this指向不对，this默认指向的是组件，而不是调用的地方，你需要重新用bind设置一下指向
    // 构造函数中绑定性能会高一些
    this.inputChange= this.inputChange.bind(this);
  }
  
    // 改变input的输入值
    public inputChange(e){
        console.log(e.target.value);
        // 是React中改变值, 需要使用this.setState方法。
         this.setState({
            inputValue:e.target.value
        })
     }
     
    // 添加新的待办事项
    public addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue]
        })
    }
     
     // 删除待办事项
    public deleteItem(index){
        let list = this.state.list  // 坑：React是禁止直接操作state的,所以最好要先赋值给一个新的变量，在进行操作
        list.splice(index,1)
        this.setState({
            list:list
        })
    }

    render() { 
        return ( 
          <>
           <input value={this.state.inputValue} onChange={this.inputChange} />
           <button onClick={this.addList.bind(this)}> 增加服务 </button> // 也可以在这里进行this的绑定
           <ul>
                {
                    this.state.list.map((item,index)=>{
                       // 用map循环时，需要设置一个不同的key值,这是react的要求
                        return ( // 如果代码要换行，return后边就需要添加一个圆括号
                            <li
                            key={index+item}
                            onClick={this.deleteItem.bind(this,index)}
                            >{item}</li>
                        )
                    })
                }
            </ul>  
          </>
         );
    }

}
export default TodoList;

react组件的拆分(以及涉及到的父子组件的传值)

拆分上个进阶的demo组件，创建一个子组件 Item
import React, { Component } from 'react';
class Item  extends Component {
    constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
    }

    render() { 
        return ( 
            <div onClick={this.handleClick}>{this.props.content}</div>  // 通过props来接收父组件传过来的值
         );
    }
    
   public handleClick(){
      // 通过调用父组件通过props传过来的方法，实现子组件向父组件的传值
       this.props.deleteItem(this.props.index)
    }
}
export default Item;

 原本的父组件TodoList
 import React, { Component } from 'react';
 import Item from './Item'； // 引入拆分出去的子组件
 
 class TodoList extends Component {
  constructor(props){
    super(props)
    this.state={
        inputValue:'' ,
        list:['学习Angular', '学习React']
    }
    this.inputChange= this.inputChange.bind(this);
  }
  
    // 改变input的输入值
    public inputChange(e){
        console.log(e.target.value);
         this.setState({
            inputValue:e.target.value
        })
     }
     
    // 添加新的待办事项
    public addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue]
        })
    }
     
     // 删除待办事项
    public deleteItem(index){
        let list = this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
    }

    render() { 
        return ( 
          <>
           <input value={this.state.inputValue} onChange={this.inputChange} />
           <button onClick={this.addList.bind(this)}> 增加服务 </button>
           <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <div>
                                <Item content={item} // 引用子组件,并向子组件中传item的值
                                key={index+item}  
                                index={index}
                                deleteItem={this.deleteItem.bind(this)} // 向子组件中传相关的父组件的删除方法
                                />
                            </div>
                        )
                    })
                }
            </ul>  
          </>
         );
    }

}
export default TodoList;

父子组件传值的简单总结：

• 父组件传递给子组件： 通过属性props传值，子组件通过this.props来获取
• 子组件传递给父组件：
  ①：父组件将方法当作一个属性，传递给子组件
  ②：子组件在组件中调用父组件传递进来的function,并传入相关的参数

react中的单项数据流的介绍：

this.state的值只能在本组件中进行修改，子组件不能进行修改，它是只读属性，防止在父组件中调用多个子组件子组件同事修改this.state。

react的生命周期

终于到了react生命周期的介绍啦，是不是有点期待呢~ react的生命周期还是挺多的，希望我可以介绍清楚哈~
啥是生命周期？？ ==》 就是在某一时刻，可以自动执行的函数啦~

Initialization:初始化阶段,用来定义属性props和state

1. 其实constructor是个构造函数，它不能算的上是生命周期虽然他们的性质很相似，但是我们可以把它理解为是react的初始化阶段。

Mounting: 挂在阶段

1. componentWillMount : 在组件即将被挂载到页面的时刻执行，可以进行数据的查询，只在页面刷新时执行一次。
2. render : 页面state或props变更的时候使用。
3. componentDidMount : 组件挂载结束时被执行，只在页面刷新时执行一次。

Updation: 更新阶段

• 与states相关的
  1. shouldComponentUpdate: 组件更新前执行
  2. componentWillUpdate: 在组件更新之前，但shouldComponenUpdate之后被执行
  3. render: 更新的时候执行
  4. componentDidUpdate在组件更新之后执行，它是组件更新的最后一个环节
• 与props相关的
  1. componentWillReceiveProps: 接受props的组件才会触发这个生命周期，子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。

Unmounting: 销毁阶段

1. componentWillUnmount: 组件被删除时执行

总结

初识react,还有很多不足的地方~ 希望大家可以一起学习，一起进步鸭~