快速入门 react - 第一课

前言

 React 是一个用于构建用户界面的 JavaScript 库。

 React 特点：

• 虚拟dom节点
• 单向数据流
• 组件开发思维

---

目录

安装

JXS简介

元素渲染

 文本渲染

 html渲染

条件渲染

  &&  与运算符

 三目运算符

列表渲染

事件

         1. 箭头函数  onClick={()=>{ xx }} 

2. onClick={函数名}

3. onClick={函数名.bind(this,参数)}

4. onClick={()=>函数名(参数)}

react 响应式数据 State

 更新state状态

---

安装

        1. 安装脚手架

                 npm i create-react-app -g 

        2. 创建项目

                 create-react-app 项目名称 

        3. 启动

                 cd 你的项目 

                 npm start 

JXS简介

        JSX，是一个 JavaScript 的语法扩展（ JavaScript 与 HTML 结合）。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

 JSX 特点 ：

• 有且只有一个根节点
•  class 用 className 代替
• 数组可以放html节点，数组自动展开
• {}表示JavaScript
• 样式自动展开（对象）
• {/*注释内容*/}

元素渲染

在App.js里写

 文本渲染

const str = "你好react"
function App() {
  return (<div>
    <p>{str}</p>
    <p>{3 - 1}</p>
    <p>{str.split('').reverse().join('')}</p>
  </div>)
}
export default App;

运行结果：

 {} 里可以写 变量名 还可以写 js 

 html渲染

const msg = "<b>hi!</b>中国"
function App() {
  return (<div>
    <p dangerouslySetInnerHTML={{ __html: msg }}></p>
  </div>)
}
export default App;

运行结果：

条件渲染

  &&  与运算符

const flag = true
function App() {
  return (<div>
    {flag && <p>111</p>}
  </div>)
}
export default App;

运行结果：

 如果条件是 true ，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

 三目运算符

const score = 70
function App() {
  return (<div>
    <p>{score > 60 ? '及格' : '不及格'}</p>
  </div>)
}
export default App;

 运行结果：

{ 条件？成立结果：不成立结果 }

列表渲染

const list = ['vue', 'react', 'angular', 'jquery']
function App() {
  return (<div>
    {list.map((item, index) => <p key={index}>{item}</p>)}
  </div>)
}
export default App;

运行结果：

         key 帮助 React 识别哪些元素改变了，比如被添加或删除。应当给数组中的每一个元素赋予一个确定的标识。

        如果列表项目的顺序可能会变化，不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

事件

 React 事件与 js 事件一致 ，但是React 事件的命名采用 小驼峰式 （camelCase）

事件的四种语法：

 1. 箭头函数  onClick={()=>{ xx }} 

function App() {
  return (<div>
    <button onClick={() => { alert("秋天") }}>按钮</button>
  </div>)
}
export default App;

        点击出现弹框，内容为：秋天

2. onClick={函数名}

const say = function () {
  alert("秋天")
}
function App() {
  return (<div>
    <button onClick={say}>按钮</button>
  </div>)
}
export default App;

        点击出现弹框，内容为：秋天真美

3. onClick={函数名.bind(this,参数)}

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (<div>
    <button onClick={say.bind(this, '真美')}>按钮</button>
  </div>)
}
export default App;

        点击出现弹框，内容为：秋天真美

4. onClick={()=>函数名(参数)}

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (<div>
    <button onClick={() => say('真温柔')}>按钮</button>
  </div>)
}
export default App;

        点击出现弹框，内容为：秋天真温柔

react 响应式数据 State

// react 响应式数据state
// 导入React 和Component方法 imrc + TAB
import React, { Component } from 'react';
// 创建一个App类 基础了Component方法 ccc+Tab
class App extends Component {
    // 构造函数
    constructor(props) {
        // 执行父类方法
        super(props);
        // 响应式状态
        this.state = { num: 1 }
    }
    addNum(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.addNum.bind(this, 2)}>{this.state.num}</button>
        </div>);
    }
}
export default App;

运行效果：

 点击按钮 num+1 

 更新state状态

    this.setState({key:value})

---

题外话：

 Simple React Snippets  ，react 快速生成代码块插件

在作组件的时候，都需要写一个固定的基本格式，这时候你就可以使用快捷键帮我们生成代码

 imrc + Tab 生成如下代码：

import React, { Component } from 'react';

 ccc+Tab 生成如下代码：

class Test extends Component {
  state = {  }
  render() { 
    return ( <div></div> );
  }
}
export default Test;

---

本节知识先到这里，我们下节再见...