React学习第一天——初识React（JSX、组件、props、status、事件）

初识React

JSX

对我来说是一个新的概念——在js中编写html

整个网站通过index.html中呈现，但内容的编写是通过index.js进行渲染。

在index.js中，使用ReactDOM.render，选择需要从哪个文件中进行渲染（官网默认安装下是选择App.js文件，渲染到index.html中id为root的div中）

而在App.js中就是JSX的方式，在js中编写html。方式也很灵活，可以在标签中引用其他声明、使用函数运算。与vue不同的是，引用其他变量不再是双括号{{}}，而是单括号{}即可

let fn  = function(a,b){
    return a+b
}
let msg = "hello"
let h1 = <h1>{fn(10,50)} {msg} test</h1>

最后在网页中输出的结果为：60 hello test
另外在JSX中设置div的class属性，由于跟es7中类名冲突，所以需要写成className，例如：

let div = <div className="msg"></div>

在控制台即可看到div的类名为hello

---

组件

方便我们灵活重复调用

组件的命名首字母要大写

两种类型

1.函数组件

跟写函数一样，直接返回出一个新的界面即可

function Test(){
    return <div>芜湖，起飞</div>
}
function App(){
    return <Test></Test>
}

这样就可以在界面中看到我们的文字

函数组件的动态渲染

通过props传参实现动态渲染

function Test(props){
    return <div>芜湖,{props.LX}起飞</div>
}
function App(){
    return <Test LX="我"></Test>
}

最后在界面上输出的结果：芜湖，我起飞

2.类组件

使用class来定义组件，此时需要继承React.Coponent，并且在返回时，需要一个render函数

class Test extends React.Component {
  render() {
    return <div>哦豁，就这？</div>
  }
}
function App(){
    return <Test></Test>
}

类组件的动态渲染

与函数组件不同的是，props的传值放在render中

class Test extends React.Component {
  render() {
    return <div>哦豁{this.props.LX}就这？</div>
  }
}
function App(){
    return <Test LX="你也"></Test>
}

动态渲染中，都可以设置多个值的动态渲染

3.状态组件（State）

只存在于 class 组件中

整体步骤：

1.在constructor中继承props，并赋值

2.写函数的时候最好使用箭头函数，以改变this指向

class CountNum extends React.Component {
  constructor(props) {
    super(props)
    this.state = { num: 0 }
  }
  addNum = () => {
    this.setState({
      num: this.state.num + 1,
    })
  }
  render() {
    return (
      <div>
        <div>数字为：{this.state.num}</div>
        <button onClick={this.addNum}>加一位数</button>
      </div>
    )
  }
}

最后在App中引用即可