回顾Javascript React基础
前言
React核心的单向数据流、一切皆数据的state、不会改变的props，以及状态提升等等经常使用便不多总结，需要的看官方文档。
JSX
JSX本质只是为React.createElement(component,props,...children)提供的语法糖！
- 1.ReactDOM在渲染之前都被转换成了字符串，它天生自带防止XSS攻击的属性。
- 2.Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。在线babel编译
以下两段代码等价（许多react的界面设计器通过这个原理，达到元数据转化React元素，实现界面化编程！）
嵌套就是多个create方法的嵌套。
functionhello(){
returnHello,world! - 3.JSX中的属性是可以任何{}包裹的JavaScript表达式作为一个属性值，不能使用if和for。
需要循环和条件渲染可以使用map、三目，或者使用if/for在jsx代码之外！
//错误的！
classAextendsReact.Component{
render(){
return{if(){}else{}};//原来还蒙蔽的不知道为什么错了0.0
}
}
React.Component（组件）
创建组件的四种方式：
React.Component方式
classGreetingextendsReact.Component{
render(){
returnHello,{this.props.name}
;
}
}
ES5
varcreateReactClass=require('create-react-class');
varGreeting=createReactClass({
render:function(){
returnHello,{this.props.name}
;
}
});
//或者使用react
varGreeting=React.create({
render:function(){
returnHello,{this.props.name}
;
}
});
函数式
constButton=({
day,
increment
})=>{
return(
Todayis{day}
)
}
PureComponet
大多数情况下，我们使用PureComponent能够简化我们的代码，并且提高性能，但是PureComponent的自动为我们添加的shouldComponentUpate函数，只是对props和state进行浅比较(shadowcomparison)，当props或者state本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的props和state发生了变化，但组件却没有更新的问题。当然还是有解决的方法的，所以建议还是少用。
事件处理
事件绑定的四种方法：推荐使用第一第二种。
classToggleextendsReact.Component{
constructor(props){
{...}
//方法一必须在这里绑定
this.handleClick1=this.handleClick.bind(this);
}
handleClick1(){
this...
}
//方法二使用【属性初始化器语法】【需要开启babelstage-0以上】
handleClick2=()=>{
this...
}
render(){
return(
//方法三在使用时绑定
//方法四在回调函数中使用箭头函数
/**
渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
**/
this.handleClick1(e)}>
);
}
}
组合vs继承
在React中不推荐使用继承,不推荐继承自定义Component。
//不推荐使用
classParentextendsReact.Component{
render(){
return...;
}
}
classAextendsParent{
render(){
return...;
}
}
//推荐使用
classAextendsReact.Component{
render(){
return... ;
}
}
不使用ES6
- Component||create
- defaultProps||getDefaultProps
- constructorstate||getInitialState
- thisbind||不需要
classGreetingextendsReact.Component{
constructor(props){
super(props);
this.state={count:props.initialCount};
this.handleClick=this.handleClick.bind(this);
}
handleClick(){
alert(this.state.message);
}
render(){
returnHello,{this.props.name};
}
}
Greeting.defaultProps={
name:'Mary'
};
varcreateReactClass=require('create-react-class');
varGreeting=createReactClass({
getInitialState:function(){
return{count:this.props.initialCount};
},
getDefaultProps:function(){
return{
name:'Mary'
};
},
handleClick:function(){
alert(this.state.message);
},
render:function(){
//组件中的方法会自动绑定至实例，不需要像上面那样加.bind(this)
returnHello,{this.props.name};
}
});
Refs
1.如果可以通过声明式实现，则尽量避免使用refs。
2.不能在函数式组件上使用ref属性，因为它们没有实例
3.旧版API：String类型的Refs，存在问题，可能会在未来移除，不推荐使用。
4.对父组件暴露refs，在父元素拿子元素
functionCustomTextInput(props){
return(
this.inputElement=el}
/>
);
}
}
ReactDOM
获取一个DOM除了refs还有更加简单粗暴的方法findDOMNode。
findDOMNode是用于操作底层DOM节点的备用方案。使用它的优先级比refs更低！！
findDOMNode只对挂载过的组件有效。
findDOMNode不能用于函数式的组件中。
importReactDOMfrom'react-dom'; ReactDOM.render( element, container, [callback]//不为人知的第三个参数！！ ) ReactDOM.unmountComponentAtNode(container) ReactDOM.findDOMNode(component)
不常用的新发现
- 空的JSX标签Fragments<>或者
- 与运算符&&true&&expression总是返回expression，而false&&expression总是返回false。
- 阻止组件渲染常用null组件的render方法返回null并不会影响该组件生命周期方法的回调。例如，componentWillUpdate和componentDidUpdate依然可以被调用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。