JSX
你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。
注意事项:
- 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。
如:class => className - textarea在HTML中,是在两标签写入内容。但为了保持React中表现一致,在React中使用value={}传递值与其它React中的input相同;
- 自定义的标签应当以大写字母开头,才能被React识别到;
- &&运算符与三元运算都是允许的,保证左右侧一定为布尔值(此处涉及到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式的定义
- 需要将props替换为this.props;
- 多了类的概念以及会涉及到的生命周期的钩子函数;
- 自定义方法使用需要bind(this),或者使用箭头函数定义或者使用;
- 数据自顶而下,不应该对props产生任何修改;
- 使用setState更新状态而不是使用“.“访问的方式;
- setState被设计为异步执行,在有多个setState的情况下会被React合并成一个,不应依赖与this.state.props去计算另一个属性,正确的做法是使用setState接收一个函数
setState((prevState , props) => {
someProps:prevState.someProps+props.someProps;
})
值得知道的点
- 函数返回null则什么都不回渲染;
- props的传递不限类型,同样可以传递函数,方便数据与展示的区分;
生命周期
关于生命周期所涉及到的钩子函数:
- 调度过程中:componentWillMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate
- 执行过程中:componentDidMount、componentDidUpdate、componentWillUnmount
钩子函数的执行过程:
- 挂载过程:
constructor => componentWillMount => render =>子组件constructor =>子组件componentWillMount =>子组件render =>子组件componentDidMount =>componentDidMount
- 更新过程:
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/
事件处理
- 事件的书写不同意HTML的方式采用驼峰式onClick取代onclick;
- 使用e.preventDefault()来阻止默认事件而不是return false;
- 自定义函数需要bind(this),推荐在constructor中统一对类中的方法进行bind;
- 参数e的传递在箭头函数中必须被显式子的传递,bind的方式将被隐式的传递,值得注意的是bind的传递在形参上的访问必须放在最后一个;
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
条件渲染
- 运用map函数遍历数组并返回每次需要的元素;
- 为遍历出的element添加key元素;(与diif算法有关,提高性能)
- 同一层级的兄弟元素的key不应该相同,在DOM树上不互为兄弟元素的key可以重复;
状态提升
将state提升到父组件,使数据自顶而下向下流,统一管理state会更加方便;这一部分更多请参考:React学习笔记——Redux
组合与继承
只需要知道React并不赞成继承,多使用组合的方式去实现应用;