React简单易上手

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。

React 特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React 安装

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;

运行结果

 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;

 更新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;

END . . . . . .