React基础

1、React组件

组件的概念

React 应用都是构建在组件之上。

组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。

1.1、函数组件

无状态函数式组件形式上表现为一个只带有一个 render() 方法的组件类，通过函数形式或者 ES6 箭头 function的形式在创建，并且该组件是无state状态的。具体的创建形式如下

import React from 'react';

//定义一个React组件
function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

1.2、类组件

React.Component 是以 ES6 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 React.Component 形式如下

import React from 'react';

//定义一个React组件
class App extends React.Component{
  render(){
    return (
      <div>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

在其他文件中引用组件

import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

1.3、函数组件和class组件的区别

用构造函数创建出来的组件，叫做“无状态组件”；

用class关键字创建出来的组件，叫做“有状态组件”；

有状态组件和无状态组件之间的本质区别是有无state属性。

注意：

使用class 关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；

使用function创建的组件，只有props，没有自己的私有数据和生命周期函数；

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件

区别	函数组件	class组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有

2、JSX语法

React 使用 JSX 来替代常规的 JavaScript。

JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。

JSX 有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
• 它是类型安全的，在编译过程中就能发现错误；
• 使用 JSX 编写模板更加简单快速。

**JSX 语法的本质：**并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。

**JSX 注释：**推荐使用 {/* 这是注释 */}；

**JSX中添加class类名：**需要使用 className 来替代 class ；htmlFor 替代 label 的 for 属性；

在JSX创建DOM的时候，所有节点必须有唯一的根元素进行包裹；

在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和；

代码示例：

const mydiv = <div>这是一个Div标签</div>;
ReactDOM.render(mydiv, document.getElementById('root'));

使用组件化开发代码示例：

App.js 组件文件代码

import React from 'react';

class App extends React.Component{
  render(){
    return (
      <div>
        {1+1}
        <hr/>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

在其他文件中使用 JSX 语法引用组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

渲染数字

import React from 'react';
import ReactDOM from 'react-dom';

let a = 10;

ReactDOM.render(
    <div>{a}</div>
, document.getElementById('root'));

渲染字符串

import React from 'react';
import ReactDOM from 'react-dom';

let str = 'hello react';

ReactDOM.render(
    <div>{str}</div>
, document.getElementById('root'));

渲染布尔类型

import React from 'react';
import ReactDOM from 'react-dom';

let rel = true;

ReactDOM.render(
    <div>{rel ? '结果为真' : '结果为假'}</div>
, document.getElementById('root'));

渲染属性值

import React from 'react';
import ReactDOM from 'react-dom';

let title = "this is a div";

ReactDOM.render(
    <div title={title}>Hello React</div>
, document.getElementById('root'));

渲染标签对象

import React from 'react';
import ReactDOM from 'react-dom';

const h1 = <h1>Hello React!</h1>;

ReactDOM.render(
    <div>
        {h1}
    </div>
, document.getElementById('root'));

渲染数组

import React from 'react';
import ReactDOM from 'react-dom';

const arr = [
    <h1>第1行</h1>,
    <h2>第2行</h2>,
];

ReactDOM.render(
    <div>
        {arr}
    </div>
, document.getElementById('root'));

将普通数组转为 JSX 数组，并渲染到页面中

解决 Warning: Each child in a list should have a unique “key” prop.

方法一：

import React from 'react';
import ReactDOM from 'react-dom';

//原数组
const arr = ['html','css','vue'];
//新数组
const newArr = [];
//forEach()方法没有返回值
arr.forEach((item,index) => {
    const temp = <h2 key={index}>{item}</h2>
    newArr.push(temp);
});

ReactDOM.render(
    <div>
        {newArr}
    </div>
, document.getElementById('root'));

方法二：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css';

//原数组
const arr = ['html','css','vue'];

ReactDOM.render(
    <div>
    	{/* map()方法有返回值 */}
        {arr.map((item,index) => {
        return <h2 key={index}>{item}</h2>
        })}
    </div>
, document.getElementById('root'));

3、React核心属性

3.1、props属性

react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

props属性的特点：

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

5.对props中的属性值进行类型限制和必要性限制

代码示例

使用函数组件：

import React from 'react';
import ReactDOM from 'react-dom';

//使用函数组件
function User(props){
    //在组件中获取props属性值
	return <div>{props.name}，{props.age}</div>
}

//定义数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

使用类组件：

import React from 'react';
import ReactDOM from 'react-dom';

//使用class组件
class User extends React.Component{
    render(){
        return (
    <div>{this.props.name}--{this.props.age}</div>
        );
    }
}

//数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

3.2、state属性

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

代码示例：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{
	//构造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state属性是可修改的
        this.state.name = 'jack';
        return (
        <h1>{this.state.name}</h1>
        );
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

设置状态:setState

setState(object nextState[, function callback])

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

3.3、props和state属性的区别

• props中的数据都是外界传递过来的；
• state中的数据都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）
• props中的数据都是只读的，不能重新赋值；
• state中的数据，都是可读可写的；
• 子组件只能通过props传递数据；

3.4、refs属性

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等

• 给DOM元素添加ref属性
• 给类组件添加ref属性

代码示例：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{

    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    //点击事件
    handleClick(){
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
    }

    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="点我输入框获取焦点"
                    onClick={this.handleClick}/>
            </div>
        );    
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

4、TodoList案例