React.js框架

一、框架介绍

• 基本介绍：
  • React JS编写PC网页、React Native可以使用JavaScript, CSS和HTML创建原生移动应用
  • 支持原生ES6语法，并且提供了自定义的JSX语法，也就表明了难于原有系统重构
  • 可与其他框架开发并存，比如：支持原生Html+React组件
• 脚手架创建项目：
  • 初始化项目npx create-react-app my-app
  • 启动项目npm start
• JSX语法：
  • 两种类型标签：
    • html标签，以前在js里写html标签得加单引号，现在可以直接在js写普通的html标签
    • 组件标签，比如<App />需要首字符大写
    • 占位组件：<Fragment>
    • 如果不需要JSX转义：dangerouslySetInnerHTML={{__html:this.state,content}}
  • 要在JSX语法里写JS的表达式，必须加花括号{item.id}
  • 注释：{/* 注释 */}
• 数据驱动和事件绑定：
  • 定义数据 ：this.stata = {inputValue:'hello world'} 
  • 取数据：value={ this.stata.inputValue }
  • 事件绑定：onChange={ this.fun.bind(this,index) } 
    • 在JSX中传递事件，onChange是函数在处理过程会丢失this，需要绑定对象的this
    • 还可以绑定很多其他的JS事件
  • 函数定义：fun(e,index) { this.setState( {inputValue : e.target.value} ) }
    • setState方法是异步执行，第二个参数可以传入一个回调函数在渲染完成时执行
  • List迭代：this.state.list.map( (value,index) => { return <li key={index}>{value}</li> } )
  • 样式定义：className = 'input'  import './style.css'
• 组件拆分与组件传值：
  • 组件传递内容：<TodoItem content={value}/> 也可传递函数
  • 组件接受内容：<li> {this.props.content} </li>  都可以从this.props取值
• props、state和render函数：
  • props可以获取到传递过来的属性、函数等，当props属性的值发生改变，render函数会被执行
  • state代表组件里的数据，组件初始创建时 或 当state数据发生变更，render函数都会被执行一次
  • render函数用来渲染组件中的内容
• ref对应JSX真实标签的dom结构：
  • ref={ (button)=> {this.buttonElem = button} } this.buttonElem就可以被索引到了
  • ref写在html标签，获取的是dom节点
  • ref写在组件标签上，获取的是组件的js实例
• 生命周期函数：
  • Initialization初始化，执行constructor构造器方法装载props和state数据
    • super(props); this.state = {};
  • Mounting挂载阶段，执行render方法，以及相应的拦截componentWillMount和componentDidMount(适合用于发送ajax请求--axios库)
  • Updation更新运行阶段，当props和states发生变化会执行相应的流程
    • props执行componentReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
    • states执行shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
  • Unmounting卸载阶段，当组件被移除的时候执行componentWillUnmount方法
  • 可以根据生命周期的方法去加一些额外的操作；
• Ant Design / Ant Design Pro组件库：
  • 大量可以使用的组件可以直接使用，非常方便开发
  • Layout页面布局、导航菜单、Icon图标、卡片、对话框、输入框、Message全局信息
  • 写style样式的时候需要注意优先级问题，!important；
• 前端路由：
  • 定义路由，<BrowserRouter> <Route path='/list' component={NewList} /> </BrowserRouter>
    • /list/:id，id会传递给对应的组件并且放入到params，通过this.props.match.params.id取出
    • /list/:id?，代表id可以不填
  • 链接跳转，<Link to='/list'> 标签 </Link>，不能使用a标签
  • JS代码实现页面跳转，this.props.history.push('/home') 跳转到home
    • this.props.history.go(-1) 返回上一个页面
  • 默认路由，将path = '/'
    • 默认是模糊匹配，只要pathname以path开头就可匹配成功
    • 精准匹配，给Route组件添加exact属性，变为精确匹配，完全相同才可匹配成功