react入门---cdn引入方式

什么是react:一款由Facebook开发的前端框架

优点: 组件化,虚拟dom,跨平台 生态圈完善 更贴近原生es6 开发模式: 1cdn引入: react.js(核心语法)+react-dom.js(虚拟dom)+babel.js(解析未被浏览器支持的js)

注意事项: 01js标签内协商type='txet/babel'; 02和vue一样,组件必须有一个根节点(最外层需要包裹div); 03单标签必须闭合,如img,必须在结尾加反斜杠; 04{}可以放置变量,函数调用,三目,js方法,计算等; 05属性值也可以用变量,但需要去点引号,包裹{}; 06样式style的class需要写成className; 07:{}不能直接放对象,需要转化为字符串{json.stringfing(对象)} 08事件需要注意this指向问题,要么用就箭头函数,要么在时间结尾出.bind改变this指向,此方法还可以传参

dom渲染:reactDom.render(组件,挂载的元素)

react的组件定义: 函数式定义:let COm=()=>{ } class类组件定义: class com extends rect.component{ render(){ } } 组件的使用方式:

react的组件生命周期: 挂在前:componentwillmount 挂载后:componentDidMount 更新前:componentwillUpdate 更新后:componentdidUpdate 销毁后:componentwillunmount

react组件的状态: class com extends rect.component{ constructor(){ super(); this.state.xxx// 设置状态 } add(){ // 事件 this.setState({ //修改状态 n:this.state.n+1 }) } render(){

} }

react组件的属性: 函数式:(类似于函数的传参,通过下方组件的属性传过来的) let COm=(props)=>{

} ReactDOM.render(,document.querySelector('#app')) class类组件: class Com extends React.Component{ render () { return( ) } }

class类组件和函数式组件区别: class:有生命周期 有状态state this指向实例对象,有属性 函数式:基础函数式没有生命周期,基础函数式没有状态state,this指向如果不是箭头函数可能会乱,由属性