React学习笔记——基础

JSX

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。
注意事项：

1. 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。
   如：class => className
2. textarea在HTML中，是在两标签写入内容。但为了保持React中表现一致，在React中使用value＝{}传递值与其它React中的input相同；
3. 自定义的标签应当以大写字母开头，才能被React识别到；
4. &&运算符与三元运算都是允许的，保证左右侧一定为布尔值（此处涉及到falsy值，请查阅MDN）

组件

在React中有两种常用的方式定义组件，另外值得注意的是自定义组件应总以大写字母开头
1.函数式

function AnotherComponent(props){
	return(
		<div>
			{props.prop}
		</div>
	)
}

<AnotherComponent prop1={"xxx"} prop2={someObject.someprops}/>

最终prop1与prop2都可以在function内使用props.的形式进行访问；
2.ES6的class定义一个组件

class Component extends React.Component{
	constructor(props){
		//构造函数，在定义this.state后成为一个有状态组件
		super(props);
		this.state = {
			prop1:[] //...
		}
	}
	componentDidMount() {
		//挂载完成后运行
	}
	componentWillUnmount() {
		//挂载之前运行
	}
	tick() { 
		this.setState({
			prop1:[1,2]
		})
	}
	render() {
		//在返回之前可以进行一系列运算，最终return一个模板
		return(
			<div>
				｛this.state.prop1｝//something here...
			</div>
		)
	}
}

相对于函数式，class式的定义

1. 需要将props替换为this.props；
2. 多了类的概念以及会涉及到的生命周期的钩子函数；
3. 自定义方法使用需要bind(this)，或者使用箭头函数定义或者使用；
4. 数据自顶而下，不应该对props产生任何修改；
5. 使用setState更新状态而不是使用“.“访问的方式；
6. setState被设计为异步执行，在有多个setState的情况下会被React合并成一个，不应依赖与this.state.props去计算另一个属性，正确的做法是使用setState接收一个函数

setState((prevState , props) => {
	someProps:prevState.someProps+props.someProps; 
})

值得知道的点

1. 函数返回null则什么都不回渲染；
2. props的传递不限类型，同样可以传递函数，方便数据与展示的区分；

生命周期

关于生命周期所涉及到的钩子函数：

1. 调度过程中：componentWillMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate
2. 执行过程中：componentDidMount、componentDidUpdate、componentWillUnmount

钩子函数的执行过程：

1. 挂载过程：
   constructor => componentWillMount => render =>子组件constructor =>子组件componentWillMount =>子组件render =>子组件componentDidMount =>componentDidMount
   
2. 更新过程：
   eventHandler => shouldComponentUpdate => render =>子组件componentWillReceiveProps =>子组件shouldComponentUpdate =>子组件componentWillUpdate =>子组件render =>子组件componentDidUpdate =>子组件componentDidUpdate
   
   值得注意的点：
   a. componentDidMount、componentDidUpdate适合放置ajax请求;
   b. shouldComponentUpdate会判断是否需要更新，返回false的时候会跳过更新流程render不会触发，则在此处可以进行一些操作阻止更新；
   c. componentWillUpdate中无法调用this.setState(),有需要应该在 componentWillReceiveProps中更新state；
   d. componentDidUpdate可以观察到prevProps与this.props的区别；
   e. componentWillUnmount解除定时器、监听器等操作；

参考：余伯伦 https://yubolun.com/react-learn-2-4/
事件处理

1. 事件的书写不同意HTML的方式采用驼峰式onClick取代onclick;
2. 使用e.preventDefault()来阻止默认事件而不是return false；
3. 自定义函数需要bind(this)，推荐在constructor中统一对类中的方法进行bind；
4. 参数e的传递在箭头函数中必须被显式子的传递，bind的方式将被隐式的传递，值得注意的是bind的传递在形参上的访问必须放在最后一个；

preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
}

条件渲染

1. 运用map函数遍历数组并返回每次需要的元素；
2. 为遍历出的element添加key元素；(与diif算法有关，提高性能)
3. 同一层级的兄弟元素的key不应该相同，在DOM树上不互为兄弟元素的key可以重复；

状态提升

将state提升到父组件，使数据自顶而下向下流，统一管理state会更加方便；这一部分更多请参考：React学习笔记——Redux
组合与继承

只需要知道React并不赞成继承，多使用组合的方式去实现应用；