react进阶--重读文档教程一

JSX

JSX可以防止XSS注入攻击
在渲染之前, React DOM会格式化JSX中的所有值, 从而保证用户无法注入任何应用之外的代码. 再被渲染之前, 所有的数据都被转义成为了字符串处理.

元素渲染

更新已渲染元素

React元素是不可突变的, 一旦创建了一个元素, 就不能再修改其子元素或任何属性. 更新UI的唯一方法就是创建一个新元素, 并将其传入ReactDOM.render()方法中. 但是大多数时候都只会调用一次render方法

组件和属性

组件

组件分为函数式组件和class类组件
函数式:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ES6的class:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

属性,Props是只读的

props是只读的, 无论用函数或类的方法声明组件, 都无法修改自身的props.
不改变输入的函数称为纯函数
React组件必须都是纯函数, 并禁止修改自身的props

state状态

state只能通过setState()方法设置, 并且, 唯一可以分配this.state的地方是构造函数.
state更新是异步的, 不能依赖某一个的值去更新另一个, 可以在回调函数中进行接下来的处理

任何state始终由某个特定组件所有, 并且从该state导出的任何数据或UI只能影响树中 下方 的组件

事件处理

驼峰命名, 传递一个函数作为事件处理程序
在js代码中, 事件处理函数返回一个false可以阻止默认事件, 但是在react中必须要手动调用e.preventDefault() 来阻止默认事件

当使用 React 时，你一般不需要调用 addEventListener 在 DOM 元素被创建后添加事件监听器。相反，只要当元素被初始渲染的时候提供一个监听器就可以了。

在调用事件处理函数时, 要保证this指向的是当前组件, 所以要进行this绑定, 可以通过以下几种方法

1. bind绑定 this.handleClick() = this.handleClick.bind(this)
2. 调用函数时使用箭头函数 onClick={(e) => this.handleClick(e)}
3. 函数直接使用 func = () =>{} 的方式

react中的事件处理为什么要bind this

重读之后对react中事件处理的this绑定有了新的理解
具体可见: react中事件处理时为什么要手动绑定this?

表单

受控组件

用过vue的都知道, vue是双向绑定数据流,表单中绑定data元素只需要v-model就可以解决
但react是单向数据流, 在表单中某个input输入框若要绑定某个state必须通过受控组件进行
handleChange(event) { this.setState({value: event.target.value}); }
<input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />

用表单的onChange处理函数对input数据进行更新, 在该函数中可以对输入数据进行特殊处理, 这也更符合react给使用者的自由度更大的设计思想

最后

切记阅读代码的重要性远远高于写代码，模块化、结构清晰的代码最利于阅读。当创建一个大组件库的时候，你将感激模块化、结构清晰和可以重用的代码，同时你的代码行数会慢慢减少.