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绑定, 可以通过以下几种方法

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

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

之前一直没有深入研究过这个问题, 重读后仔细研究了一下这个问题.
我们都知道普通js函数中this的指向是调用函数的对象,而且是离谁近指向谁.
非严格模式下, this默认指向全局对象window
严格模式下, this为undefined

而箭头函数是在定义时就已经确定好了this的指向, 不会根据谁调用它而改变

基于此, 在react中为什么直接 onClick={this.handleClick} 不可以呢?
根本原因是react中的dom是虚拟dom, JSX是React.createElement(component, props, ...children) 的语法糖, 在我们调用事件函数的时候其实这段代码

render(){
    
    
    return (<a href="#" onClick={
    
    this.handleClick}>click me </a>
})

是被解析成

render(){
    
    
   return React.createElement(
    "a", 
    {
    
     onClick: this.handleClick}, 
    "click me"
    );
   }

这样的代码的, onClick = {function} 中的onClick本身就是一个"中间变量", this.handleClick又作为一个callback传给另一个函数, 这时候this就丢失了.举个简单例子

class Cat {
    
    
 sayThis () {
    
    
    console.log(this); 
  }

 exec (cb) {
    
    
    cb();
  }

 render () {
    
    
    this.exec(this.sayThis);
  }
}
const cat = new Cat();
cat.render();

其中的sayThis又作为参数传给exec作为一个回调函数时, this已经丢失了
因此我们要在react的事件处理中进行bind this

参考1
参考2

表单

受控组件

用过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给使用者的自由度更大的设计思想

最后

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