React学习

在开始学习react之前，先了解一下react会用到的相关知识。

1.基本理解和使用

1.JSX

•  JSX的简介：全称JavaScript XML。react定义的一种类似于XML的JS扩展语法：JS+XML。本质是React.createElement(component, props, ...children)方法的语法糖

• 作用：用来简化创建虚拟dom

  • 写法

<!-- 准备好一个“容器” -->
<div id="test"></div>
<script type="text/babel" >
/* 此处不要写引号，因为不是字符串 */
const VDOM =  <h1 class="title">Hello,React</h1> 
ReactDOM.render(VDOM,document.getElementById('test'))
</script>

• jsx语法规则：

  • 定义虚拟DOM时，不要写引号。

  • 标签中混入JS表达式时要用{}。

  • 样式的类名指定不要用class，要用className。

  • 内联样式，要用style={{key:value}}的形式去写。

  • 只有一个根标签

  • 标签必须闭合

  • 标签首字母

    • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

2.函数式组件

• 创建一个函数式组件
• 适用于简单组件

<div id="test"></div>  
function Demo () {
    return <h2>我是一个函数式组件</h2>
}
// <Demo/> 要是一个开头字母大写的标签，同事上边函数的名字也要同步
ReactDOM.render(<Demo/>, document.getElementById('test'))

3.类式组件

• 先回忆一下js中什么是类
  • 参考链接：juejin.cn/post/742032…
• 适用于复杂组件

<script type="text/babel">
  class MyComponent extends React.Component {
    render() {
      return <div>类组件</div>
    }
  }
  ReactDOM.render(<MyComponent />, document.getElementById('test'))

• render中的this是谁？
  • MyCompontent的实例对象（MyCompontent组件实例对象）
• 在执行ReactDom.render 之后发生了什么？
  1. React解析标签，找到了MyComponent组件
  2. 发现组件式使用类定义的，随后new出来该类的实例对象，并通过该实例调用原型上的render方法。
  3. 将render返回的虚拟dom转化为真实的dom,随后呈现在页面中。

2.组件三大核心属性

1.state

• state是组件对象最重要的属性，值是对象（可以包括多个key-value组合）
• 点击事件写法
  • <div onClick={changeStatus}></div>
• 状态必须通过setState进行更新，并且更新是一种合并不是替换。
• 注意⚠️
  • ：组件中的render方法中的this为组件实例对象。
  • 组件中自定义方法中this为undefined，可以使用bind()或者箭头函数来解决
  • 状态数据，不能直接修改或更新通过setState来修改

class Weather extends React.Component {
    // 初始化状态 
    state = { isHot: false }
    changeStatus = () => {
      this.setState({ isHot: !this.state.isHot })
    }
    render() {
      const { isHot } = this.state
      return <div onClick={this.changeStatus}>今天{isHot ? '很热' : '很凉'}</div>
    }
}
ReactDOM.render(<Weather />, document.getElementById('test'))

2.props