这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

DRY原则：Don't Repeat Yourself

React 组件，单一职责原则

每个组件只做一件事；
如果组件变得复杂，那么应该拆分成小组件；

数据状态管理：DRY原则

DRY 原则：Don't Repeat Yourself

能计算得到的状态就不要单独存储
组件尽量无状态，所需数据通过props获取

JSX 的本质：动态创建组件的语法糖

在JSX中使用表达式

JSX本身也是表达式

const element = <h1>Hello World！</h1>

在属性中使用表达式

<MyComponent foo={1+2+3+4} />

延展属性

const props = {firstName: 'Ben', lastName: 'Hector'}
const greeting = <Greeting {...props} />

表达式作为子元素

const element = <li>{props.message}</li>

JSX 优点

声明式创建界面的直观
代码动态创建界面的灵活
无需学习新的模板语言

约定：自定义组件以大写字母开头

React认为小写的tag是原生的DOM节点，如 div
大写字母开头为自定义组件
JSX标记可以直接使用属性语法，如 <menu.Item />

<menu.Item /> 等同于 const Menu = {item: () => <div />}

组件 & Props

#事件处理

官网建议使用** bind（this）**或者 属性初始化器语法

事件函数绑定this

在constructor构造函数中 bind this

constructor(props){
    super(props)
    this.state = {isToggleOn: true};
    
    this.handleClick = this.handleClick.bind(this)
}

handleClick() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    })
}

render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
}

属性初始化器语法

handleClick = () => {
    console.log('this is': this)
}

render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
}
...

在回调函数中使用箭头函数

handleClick() {
    console.log('this is': this)
}

render() {
    return (
        <button onClick={e => this.handleClick(e)}> Click me </button>
    )
}

这个语法的问题是每次LoggingButton渲染的时候都会创建一个不同的回调函数；如果回调函数作为一个属性值传入低阶组件你，这些组件会进行额外的重新渲染。

向事件处理程序传递参数

一下两种方式是等价的，分别通过arrow functions 和 Function.prototype.bind 来为事件处理函数传递参数。

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

参数 e 作为React事件对象将会被作为第二个参数进行传递。
通过箭头函数的方式，事件对象必须显示的进行传递。
但是通过bind的方式，事件对象以及更多的参数将被隐式的进行传递

通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

#keys

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key:

当元素没有确定的id时，你可以使用他的序列号索引index作为key

感谢

谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，如有问题欢迎各位大佬指正。

如果觉得写得还行的话，那就点个赞吧。

React进阶 | 8月更文挑战