react的简单了解

起源

React起源于Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

特点

1. 单向数据流
2. 组件思维
3. 虚拟Dom节点

jsx语法

javascript嵌套使用html模板，有且只有一个根节点

class改成className

<h1 className='myh'>你好，react</h1>

数组可以包含html5对象样式自动展开 {/**/}注释

注释掉样式

{/*style = {stl} */}

模板语法

文本渲染

const st = "react,冲冲冲"
function App(){
    return (
        <div>
             <p>{st}</p>
             <p>{6+3}</p>
             <p>{st.split('').reverse().join('')}</p>
        </div>
     )
}
export default App;

生成st内容，6+3的值，st的翻转内容

 html渲染

const msg = "<strong>html</strong>相对简单";
function App(){
    return (
        <div>
             <p dangerouslySetInnerHTML={{__html:msg}}></p>
        </div>
     )
}
export default App;

可以生成加粗的html字样

 条件

三目运算

const score = 90;
let flag = true;
function App(){
    return (
        <div>
             <p>{score >= 85?'很棒':'再加把劲'}</p>
             {flag&&<p>快快发芽长大</p>}
        </div>
     )
}
export default App;

解释：声明score和flag，如果score的值大于等于85就输出"很棒",否则输出"再加把劲"

第二个p标签输出"快快发芽长"

 列表渲染

const list = ["reacct","vue","angular","jQuery"];
let flag = true;
function App(){
    return (
        <div>
             {list.map((item,index) => <h4 key={index}>{item}</h4>)}  
        </div>
     )
}
export default App;

运用了map函数
{list.map((item,index)=><p key={index}>{item}</p>)}

 事件响应

react中事件与js事件一致，需要驼峰写法

onClick
onBlur
oonChange

事件需要响应一个函数

function App(){
  function say(str){
    alert("game"+str)
  }
  return (
    <div>
      <button onClick={say.bind(this,"  start")}>开始</button>
      <button onClick={say.bind(this,"  over")}>结束</button>
      <button onClick={() =>say("  suspend")}>暂停</button>
    </div>
  )
}
export default App;

会生成三个按钮，开始，结束，暂停

 点击开始

 

 点击结束

 

 点击暂停

 react组件的类型

函数组件

1. 简单快捷，没有this    state数据    生命周期
2. 没有this    state数据    降低了组件的耦合性，组件复用和扩展性很强

类组件

有this    state数据    生命周期，适用于集中处理数据的"容器组件"

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { num:1 }
  }
  updatedNum(n){
    this.setState({num:this.state.num+n})
  }
  render() { 
    return (<div>
      <h1>函数</h1>
      <button onClick={() =>{
        this.setState({num:this.state.num+1})
      }}>{this.state.num}</button>
      <button onClick={this.updatedNum.bind(this,3)}>{this.state.num}</button>
    </div>);
  }
}
 
export default App;

效果：生成左右两个按钮，左边按钮每次点击两个按钮值加1，左边按钮每次点击两个按钮值加3

 代码解释：

this.state = { num:1 }        声明state的初始值为1

 updatedNum(n){

    this.setState({num:this.state.num+n})

 }                更新state的值

this.setState({num:this.state.num+1})        左边按钮每次点击两个按钮值加1

<button onClick={this.updatedNum.bind(this,3)}>{this.state.num}</button>        把3赋值给n，左边按钮每次点击两个按钮值加3