react深入文档

开篇

安装create-react-app

1. JSX 简介

jsx 本质上还是js，因此遵循驼峰命名的方式

1、jsx 属性

2、sx 防止xss漏洞
XSS漏洞分为两种，一种是DOM Based XSS漏洞，另一种是Stored XSS漏洞。理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在XSS漏洞，漏洞的危害取决于攻击代码的威力，攻击代码也不局限于 script
所有的数据在页面渲染之前都会被转换成字符串，这防止 XSS 进攻

3、dangerouslySetInnerHTML

4、false/undefined/null/0 如何渲染？
组件的第一个字母必须大写是因为约定，否则babel会转译出错。

2. React 组件和props

设置默认的props

在class里 static defaultProps
在外面直接写静态属性
类型检测
https://blog.csdn.net/Her_smile/article/details/79638715?utm_source=blogxgwz0
https://blog.csdn.net/kuangshp128/article/details/68065558?utm_source=blogxgwz1

React组件有几种生成方式

function 形式

class

条件渲染有几种方式

function if/else

变量赋值

inline 形式 ， 比如 {condition && component}, 或者 ? : 操作

props / props.children

pure function

属性不可修改

如何挂载到dom元素上 ReactDOM.render()

3. state 和 生命周期函数

setState 是 异步的吗？ this.state.a 的访问情况

didMount和unmount的作用

shouldUpdate的作用，如果shouldUpdate 返回了false，子组件的render还触发吗？哪些函数不再执行了？willUpdate和didUpdate，render 都不在触发了

setState触发后发生了什么？

image.png

constructor 
componentWillMount
render
componentDidMount
//这个循环将会执行一次

如果想访问dom元素必须在componentDidMount里面访问，
如果shouldComponentUpdate如果为false，那么componentWillUpdate 和componentDidUpdate 以及render函数是不会执行的
this.setState的改变将不会触发componentWillReceiveProps的改变
注册的事件必须在componentWillUnmount里面移除，防止内存泄漏。
在添加绑定事件的时候，三种this转作用域的方法

/*在**render**里面事件监听元素上面添加，但是每次都会绑定出一个新的地址，如果组件发生改变，里面也会被重新渲染，影响性能,同样在render里面写箭头函数也是一样的*/
onClick={this.handleClick.bind(this)}
/*在constructor里面进行绑定，只需要绑定一次，可复用性强*/
this.handleClick = this.handleClick.bind(this)
//通过箭头函数，会在constructor里面调用
handleClick = () =>{...}

4. refs 和 dom元素

ref的俩种使用方式

  handleClick = (event) => { 
    this.contentRef.style.color = "red";
  } 
  render() {
    console.log('render')
    return (
      <div className="App" onClick={this.handleClick}>
          <div ref={(content) => {this.contentRef = content}}>
//推荐使用！！！
//要访问dom加ref访问，不建议直接getElement（性能不好）
          this time is {this.state.time}
          </div>
      </div>
    );
  }

  handleClick = (event) => { 
    this.refs.content.style.color = "red";
  } 
  render() {
    console.log('render')
    return (
      <div className="App" onClick={this.handleClick}>
          <div ref="content">
          this time is {this.state.time}
          </div>
      </div>
    );
  }

-----------------为了性能考虑，请使用以下方式修改----------

在this.state中添加color:''；
在div上加style={{color:this.state.color}};
在handleClick中添加this.setState({color:'red'});
/*在做动画的时候，是比较耗时的，最好使用上面的方式
或者使用class
*/
在div上加 className={{this.state.a?"a":"b"}}

refs是字符串有什么问题？
dom元素频繁访问有什么问题？
影响性能

5. 事件

1.如何阻止默认行为？ return false 可以吗？

2.SyntheticEvent 是什么东西？

event 可以放到异步里面吗？ 比如 setTimeout(() => {console.log(event)}, 1)

事件里面的作用域

<div onClick=""></div>
function test(event) {
  return false;
}
//react event
handleClick = (event) => {
  event.stopPropagation();
  event.preventDefault(); // 在react里面也是可以这样调用的

  setTimeout(() => {
    console.log(event.type)  
    //event在异步是无法调用的，每次event调用后都会被销毁
  },0)
  console.log(event.type)   
}
//原生里面的event和react里面的event是不一样的
//react里面的event是被react封装过的
//react里面封装的event SyntheticEvent拥有大部分原生event的方法和属性
//可以通过event.nativeEvent == 原生的event

6. JSX和HTML有什么区别？

属性

事件

空格

7.list渲染

key的作用是什么，key如果不稳定有什么问题吗？
避免整体list被渲染，要取得比较稳定，不建议用index之类，耗性能。如果不增减index可以，最好添加id相对比较稳定。

image.png

上面代码，如list中某项改变了可以通过shouldComponentUpdate来判断是否需要改变

8.this.props.children

image.png

9.ReactDOM.render

image.png

其中ReactDOM.render接收三个参数，第一个是组件，第二个是节点，第三个是渲染后的回调。

10.深拷贝

image.png
image.png