环境搭建

01 项目环境搭建

使用creat-react-app 脚手架

create-react-app react_demo01

cd ./reacr_demo01

yarn start

默认是使用yarn进行启动的

我们的项目就创建完成了

jsx基本语法

02 开始书写第一个jsx代码

只要使用的是react  我们在文件中就必须使用 react  和 component 两个组件

通过构建类的方式我们可以继承Component 来创建一个组件

在内部的return 中书写了html 代码为什么没有语法的报错呢

因为这里使用了jsx 语法，他实际上是将html 转化成了dorm树的结构，这里需要进行注意的是这里只能
 拥有一个父节点

在jsx中只能可以使用 {} 大括号的形式书写任意的js代码包括变量，表达式计算，函数执行等等

这里总结一下jsx 的基本语法：
    ##只能使用一个根节点
    
    ##可以使用大括号进行编辑js代码
    
    ##jsx 中因为class 和 for 是关键字 所有不能直接进行书写  需要使用className 和htmlFor 进行代替
    
    ##其他的任意属性都能够在jsx模板中进行书写
    
    ##元素变量 
        let doma  = <div>ceshi</div>
        let dom2 = <h2>ss</h2>
        可以直接将dom 节点进行赋值给变量作为函数的参数传递和函数的返回值
          
    ##使用需要进行批量插入节点需要使用map 函数来进行处理，因为map函数是会返回一个新的数组

03 组件可以直接在另外一个组件的jsx中进行使用

事件绑定

04 事件绑定

在react 可以通过onClick，onChange 来直接进行事件的绑定，而不需要通过addEventListener来进行时间的绑定

值得注意的是这些事件的命称都是根据驼峰命名的方式命名的---跟原生的事件绑定名称有所不同

05 使用constructor 创建构造器

constructor 函数是默认存在的 根据es6的继承规则在使用new 关键字的时候会默认调用函数内部的构造函数
所以声明了constructor函数和不声明都是可以的

但是一旦声明了constructor函数函数的内部就必须调用super()方法

绑定this指向

06 当直接在调用函数的时候不能拿到对象的本身，需要显式的绑定this的指向。

例： this.change.bind(this)

代码示例

class StateChange extends Component {
  constructor(props) {
    super(props)
    // 进行初始化赋值作用
    this.state = { 
      idLinked: false,
      count: 12 
    }
    this.name = 'zhgl'
    this.count = 12
  }
  clickBtn () {
    this.setState({
      idLinked: !this.state.idLinked
    })
  }
  addCount(){
   // this.state.count = this.state.count+1 // 修改变量要通过setState 不能直接修改值
      this.setState({
        count: this.state.count = this.state.count+1
      })
  }
  render () {
    return (
      <div>
        <div>
            <button onClick={this.clickBtn.bind(this)}>change</button>  
            {this.state.idLinked===true?<span>确定</span>:<span>取消</span>}
        </div>
        <div> 
            <button onClick={this.addCount.bind(this)}>add</button>
            {<span>{this.state.count}</span>}
        </div>
        
      </div>
    )
  }
}

组件的传参

07 组件的传参
父子组件传参，可以直接在组件上面定义需要进行传递的参数，或者是方法
子组件直接使用this.props.propertyName 或者 this.props.functionName
当传递方法的时候我们可以在内部绑定一些触发的事件来间接的触发父组件传入的方法

组件的生命周期函数

08 组件的生命周期
componentWillMount--->组件挂载之前进行触发
componentDidMount--->组件挂载之后进行触发
componentWillUnmount--->组件将要被卸载的时候触发
更新阶段的组件生命周期
shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。 componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。 componentWillUpdate()：组件开始重新渲染之前调用。 componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。

 import React,{Component} from 'react'

class Header extends Component {
  // 组件将要被渲染的时候触发
  componentWillMount(){
    console.log('组件挂载之前触发')
  }
  componentDidMount(){
    console.log('组件挂载之后触发')
  }
  render(){
    return(<div>header</div>)
  }

  componentWillUnmount(){
    console.log('组件将要被卸载的时候触发')
  }
}

组件中的dom操作

09 组件中的dom操作
在react中不可避免的有时候需要进行dom操作
react.js 当中提供了ref属性来获取已经挂载的dom节点
例如在刚进入页面的时候需要将输入框自动的获取焦点的操作


class AutoFous extends Component{
  // 组件挂载的时候触发
  componentDidMount(){
    // 输入框自动聚焦
    this.input.focus()
  }
  constructor(props){
    super(props)
  }
  render(){
    return(<input ref={(input)=>this.input=input}/>)
  }
}
// 在组件上使用也可以获取组件的实例对象
<Clock ref={(clock) => this.clock = clock} />

10 向组件中传递dom
回忆一下我们之前学习过使用父子组件传参的形式（如：this.props.content，content即在组件上绑定的变量）进行参数的传递
还有种方式不需要在组件标签上绑定参数，直接在组件标签中写入相关的内嵌结构
利用this.props.children的方式，类似vue插槽的形式向组件的内部插入dom节点

//父组件
<Card><div>父组件中</div></Card>
// 子组件
import React,{Component} from 'react'
  
class Card extends Component{
  render(){
    /**
     * 类似插槽的方式获取组件内部的节点
     */
    return(
      <div className="card">
        card组件
        {this.props.children}
      </div>
    )
  }
}
export default Card

React笔记(更新中)