初始React

假设有一个需求，点击按钮改变文本的值。

1、通过原生JavaScript来实现

<script>
  <h2 class="title">hello world</h2>
  <button class="btn">按钮</button>

  <script>
    let message = "Hello World!"
  let titleEle = document.getElementsByClassName('title')[0]
  titleEle.innerHTML = message

  document.getElementsByClassName('btn')[0].addEventListener('click', event => {
    message = "Hello React!"
    titleEle.innerHTML = message
  })
</script>

从编程范式的角度来说，原生js的实现方式叫做命令式编程，当下流行的前段三大框架（vue，react，angluar）都是声明式编程方式。目前，常见的编程范式主要有三种命令式、声明式、函数式。

2、React实现文本渲染

2.1 添加React的依赖

• 通过CDN引用的方式添加

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

• 可以通过本地文件引用的方式添加依赖

<!-- 引入本地react依赖 -->
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<script src="./lib/babel.min.js"></script>
<!-- type类型必须写成text/babel，否则babel不会去解析jsx语法 -->
<script type="text/babel">
    let msg = "Hello World!"
    // render函数参数，第一个：需要被渲染的jsx代码；第二个：被渲染的元素挂载到哪里
    ReactDOM.render(<h2>{msg}</h2>, document.getElementById("app"))
</script>

目录结构

WX20200824-170847@2x.png

2.2 三个文件的作用：

• react.development.js 包含react所必须的核心代码
• react-dom.development.js react渲染在不同平台所需要的核心代码
• babel.min.js 将jsx转换成React代码的工具

<div id="header"></div>
<div id="app">adfasdfasdf</div>
<div id="footer"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- type类型必须写成text/babel，否则babel不会去解析jsx语法 -->
<script type="text/babel">
    let msg = "Hello World!"
    // render函数参数，第一个：需要被渲染的jsx代码；第二个：被渲染的元素挂载到哪里
    ReactDOM.render(<h2>{msg}</h2>, document.getElementById("app"))
</script>

直接调用ReactDOM的render函数渲染组件到指定的元素中

3、 在React中绑定事件

现在需要在jsx中添加button按钮，并绑定事件用来改变文本

let msg = "Hello World!"

function btnClicked() {
    msg = "Hello React!";
    console.log(msg);
}

ReactDOM.render((
  <div>
    <h2>{msg}</h2>
    <button onClick={btnClicked}>改变标题</button>
  </div>
 ), document.getElementById("app"))

render的第一个参数如果需要换行的话一般会加上()，第一个参数必须是一个dom节点，不能多个节点，否则报错。上面的h2标签和button标签都被包括在div中，div作为一个根节点。

button的绑定事件需要使用onClick指令，注意：<u>Click中首字母是大写的</u>

上述代码能够改变msg的值，但是页面还不会改变

WX20200824-161624@2x.png

因为msg变量的改变不会触发render函数，也就是msg的值改变了没有重新渲染页面

可以稍作更改，如下

let msg = "Hello World!"

function btnClicked() {
  msg = "Hello React!";
  console.log(`msg is ${msg}`);
  render();
}

function render() {
  // render函数参数，第一个：需要被渲染的jsx代码；第二个：被渲染的元素挂载到哪里
  ReactDOM.render((
    <div>
        <h2>{msg}</h2>
        <button onClick={btnClicked}>改变标题</button>
    </div>
  ), document.getElementById("app"));
}

render();

WX20200824-162039@2x.png

4、组件化实现

<script type="text/babel">
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        msg: 'Hello World'
      }
    }
    render() {
      return (
        <div>
          <h2>{this.state.msg}</h2>
          <button onClick={this.btnClicked.bind(this)}>改变文本</button>
        </div>
      )
    }

    btnClicked = () => {
      // 这种方式不会触发render函数，不会重新渲染页面
      // this.state.msg = "Hello React!" 
      // 必须使用setState这种方式
      this.setState({
        msg: "Hello React!"
      })
    }
  }
  ReactDOM.render(<App />, document.getElementById('app'));
</script>

组件必须继承自React.Component

button的click事件需要绑定到App组件上，否则btnClicked函数中的this会是undefined