开篇
安装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触发后发生了什么？
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相对比较稳定。
上面代码，如list中某项改变了可以通过shouldComponentUpdate来判断是否需要改变
8.this.props.children
9.ReactDOM.render
其中ReactDOM.render接收三个参数，第一个是组件，第二个是节点，第三个是渲染后的回调。
10.深拷贝
