React学习之道笔记-React基础入门

ReactDOM

ReactDOM.render() 会使用你的 JSX来替换你的 HTML 中的一个 DOM 节点。

ReactDOM.render()有两个传入参数。第一个是准备渲染的 JSX。第二个参数指定了 React应用在你的 HTML 中的放置的位置。

示例：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
,
document.getElementById('root')
);

热模块替换

用 create-react-app 创建的项目，保存时浏览器能够自动刷新；
但是有点时候我们并不希望浏览器刷新也没，因为可能会打断我们的debug状态，比如说console/network中输出的内容

模块热替换（HMR）是一个帮助你在浏览器中重新加载应用的工具，并且无需再让浏览
器刷新页面。

示例：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}

React的类组件

import React, { Component } from 'react';
...
class App extends Component {
render() {
...
}
}

Component 类是从一个基本ES6类中继承来的 ES6组件类。它有一个React组件所需要的所有功能。

render()方法是必须被重写的方法，因为它定义了一个React组件的输出。它必须被定义。

组件的状态

ES6对象初始化

ES6中，初始化对象时，属性名和变量名同名时，可以简写属性，如：

const name = 'Robin';
const user = {
name: name,
};

可以被简写成：

const name = 'Robin';
const user = {
name,
};

方法名也可以简化，比如：

// ES5
var userService = {
getUserName: function (user) {
return user.firstname + ' ' + user.lastname;
},
};
// ES6
const userService = {
getUserName(user) {
return user.firstname + ' ' + user.lastname;
},
};

ES6中使用计算属性名：

// ES5
var user = {
name: 'Robin',
};
// ES6
const key = 'name';
const user = {
[key]: 'Robin',
};

单向数据流与事件处理

绑定

为什么需要绑定：因为类的方法，不会自动绑定到实例的this上面。如下代码的this.onClickMe是undefine的：

class ExplainBindingsComponent extends Component {
onClickMe() {
console.log(this);
}
render() {
return (

Click Me

);
}
}

正解：

class ExplainBindingsComponent extends Component {
constructor() {
super();
this.onClickMe = this.onClickMe.bind(this);
}
onClickMe() {
console.log(this);
}
render() {
return (

Click Me

);
}
}

关于绑定的一些建议：

1. 不要在构造函数中定义业务逻辑方法，这会使得构造函数显得十分杂乱，构造函数中只定义必要的属性，并bind类方法即可
2. 不要在render中bind,这会使得每次渲染时都执行bind降低性能
3. 箭头函数可以做到自动bind

class ExplainBindingsComponent extends Component {
    onClickMe = () => {
    console.log(this);
    }
    render() {
        return (
            
            Click Me
            
            );
    }
}

受控组件

表单元素比如 , 和 会以原生 HTML 的形式保存他
们自己的状态。一旦有人从外部做了一些修改，它们就会修改内部的值，在 React 中这被
称为不受控组件，因为它们自己处理状态。在 React 中，你应该确保这些元素变为受控组
件。

示例：

class App extends Component {
    ...
    render() {
        const { searchTerm, list } = this.state;
        return (
            

                

                    
                
                ...
            
        );
    }
}

组件拆分

当单个组件逻辑过于复杂时，应该对组件进行拆分。组件拆分时涉及到同组件和父子组件之间的数据流传递。同组件之间可以用this.state传递。父组件像子组件传值，子组件可以通过this.props去获取。

可组合组件

props中有个特殊的变量children；它包含了子组件实例内的元素树。这使得组件之间相互组合变得更为方便；

比如：

      
      Search
      

在Search类中调用props.children即可使用Search实例包含的内容；

class Search extends Component {
  render() {
    const {value,onChange, children} = this.props
    return(
      
      

      {children}
      
      
    );

  }
}

可复用组件

有时候会看到一些看起来无用的封装，比如：

class Button extends Component {
  render () {
    const {
      onClick,
      className='',
      children
    } = this.props;
  
    return (
      
      {children}
      
    );
  }
}

但是这会帮你管控左右的被封装组件，只需修改封装内容，就可以实现批量修改的效果；

组件的类型

1. 函数式无状态组件：本质上就是函数，没有this对象.一个经验法则就是当你不需要本地状态或者组件生命周期方法时，你就应该使用函数式无状态组件。
2. ES6类组件：继承自React组件，extend会继承声明周期算法，可以通过this.state和this.setstate()存储和操控state

将Button重构为无状态组件（入参直接将props解构了）：

const Button =  ({onClick,className='',children}) => 
  
  {children}