React学习(一)基础语法

开始

  • 安装脚手架
    npx create-react-app <project-name>
    
  • 目录
    react folder

  • manifest.json

    • 允许将站点添加至主屏幕(support
    • name: {string} 应用名称,用于安装横幅、启动画面显示
    • short_name: {string}应用短名称,用于主屏幕显示(显示在主屏幕的应用名称长度有限,超长部分会被截断并显示省略号,需要设置较短的应用名称优化显示)
    • icons: {Array.<ImageObject>} 应用图标列表
      • ImageObject
        • src: {string} 图标 url
        • type {string} 图标的 mime 类型
        • sizes {string} 图标尺寸,格式为widthxheight,宽高数值以 css 的 px 为单位
    • start_url: {string} 应用启动地址
    • scope: {string} 作用域,仅仅对站点的某些模块进行 PWA 改造
    • background_color: {Color} css色值设置启动背景颜色
    • display: {string} 设置启动显示类型
    • orientation: string 应用显示方向
    • theme_color: {Color} css色值指定 PWA 的主题颜色,制浏览器 UI 的颜色。比如启动画面上状态栏、内容页中状态栏、地址栏的颜色,会被 theme_color 所影响
  • 运行
    cd <project-name>
    //运行
    yarn start
    //暴露配置webpack接口
    yarn ejet
    //打包
    yarn build
    //打包运行 yarn global add serve
    serve -s build
    

组件的写法

  • React元素
    const element = <Welcome name="Sara" />;
    
  • 函数定义
    //函数式组件是无状态组件,只能使用props
    function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
    }
    //箭头函数
    let Welcome = (props) => {
    return <h1>Hello, {props.name}</h1>;
    }
    
  • 类定义组件
    class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
    }
    let Welcome = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name}</h1>;
    }
    });
    
  • 组件化可以帮助我们解决前端结构的复用问题,提供一种高效的方式自动化地帮助我们更新页面,降低我们的复杂度,带来更好的可维护性
  • 组件渲染过程:jsx经过Babel编译和React构造器生成一个JS对象结构,再通过ReactDOM.render()生成DOM元素,插入页面中

jsx基本语法

  • 本质上来讲,JSX 只是为 React.createElement(component, props, ...children)方法提供的语法糖
  • 一个顶级标签和()括号包裹
  • 组件首字母大写
  • js表达式写在{expression}花括号中
  • 行内样式写在 style={object} 中,遇到-分隔符使用驼峰写法
  • html属性标签的区别:class-classNamefor-htmlForindex-tabIndex
  • 带标签字符串转义为html解析
    dangerouslySetInnerHTML={{ __html: htmlString}}
    
  • 使用三目运算符写法代替if-else
  • 注释使用花括号{/*注释...*/}
  • 属性默认为true
  • 展开属性:使用 ... 作为“展开(spread)”操作符来传递整个属性对象
    const Button = props => {
      const { kind, ...other } = props;
      const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
      return <button className={className} {...other} />;
    };
    
  • 布尔值、Null 和 Undefined 被忽略

React中的事件监听

  • 使用on*进行事件监听,React事件绑定属性的命名采用驼峰式写法
  • 在jsx中调用是传入事件处理函数给表达式{}
  • 事件监听函数自动传入一个React重新包装的event对象,不需要考虑兼容问题;一般来说,我们在实例中定义一个方法,this指向实例本身。但是在事件监听函数中,如果我们使用实例,需要手动绑定this.handleEvent.bind(this)

props

  • 每个组件可以接受一个props对象的属性,包含对于组件的配置
  • 组件内部是通过this.props的方式获取到组件的参数
  • this.props对象的属性与组件的属性一一对应,this.props.children属性表示组件的所有子节点
  • 只读性:无论是使用函数或是类来声明一个组件,它决不能修改它自己的props
  • 在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为 props 对象的键值
  • 默认配置 defaultProps,不需要判断配置属性是否传入
    static defaultProps = {
      key: defaultValue
    }
    

state

  • state可以用来保存组件有私有的可变的状态,用以更新组件UI。状态是私有的,完全受控于当前组件
  • setState({type: Object})用来更新组件状态
    • 调用这个方法,会更新state,并且重新调用render()方法,渲染的最新的内容显示到页面上
    • 方法不会立即执行,而是缓存到事件队列中合并执行
    • 如果需要使用上次调用后的结果,可以传入一个函数,通过prevState参数调用上个setState的返回结果
  • state和props:
    • state 是让组件控制自己的状态,props 是让外部对组件自己进行配置
    • 没有state的组件叫无状态组件,设置了state的叫做有状态组件。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,增强组件的可复用性

列表渲染

  • 直接传入数组{[Array]}
  • 使用 map 渲染列表数据
  • Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
    );
    

表单——受控组件

  • input: 通过事件监听更新状态
    class NameForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
      this.setState({value: event.target.value});
    }
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
    }
    

状态提升

  • 状态提升:使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理
    class Input extends Component {
    handleChange(event) {
      this.props.setNum(event.target.value)
    }
    render() {
      return (
        <div>
          <input
            type="number"
            value={this.props.value}
            onChange={this.handleChange.bind(this)}
          />
        </div>
      )
    }
    }
    class PercentageShower extends Component {
    numberToPercentage(value) {
      let val = value * 100
      return val.toFixed(2) + '%'
    }
    render() {
      return <div>{this.numberToPercentage(this.props.value)}</div>
    }
    }
    class PercentageApp extends Component {
    constructor(props) {
      super(props)
      this.state = {
        value: 0
      }
    }
    setNum(val) {
      this.setState({
        value: val
      })
    }
    render() {
      return (
        <div>
          <Input value={this.state.value} setNum={this.setNum.bind(this)} />
          <PercentageShower value={this.state.value} />
        </div>
      )
    }
    }
    

生命周期

  • componentWillMount():在组件挂载前被立即调用,即在初始化render之前,因此在此函数中改变State不会触发重新渲染,也不可以在此函数中进行DOM操作,在此函数中可以访问组件的Props,如果需要从远端加载数据,也可以在此函数中进行操作
  • componentDidMount():此函数在组件挂载之后立即被调用,在此方法中改变State会触发重新渲染,在此函数中对DOM进行操作是安全的
  • componentWillReceiveProps(nextProps):此函数在已挂载的组件接收到新的Props时被调用,当需要响应Props的变更并对State进行修改时,可以在此方法中进行。this.props访问旧的Props,参数nextProps可以访问新的Props
  • shouldComponentUpdate(nextProps, nextState):此函数在组件接收到新的State或Props之后,重新渲染之前调用,默认返回true。默认情况下,每次组件的State或Props变化之后,都会重新渲染。如果确定某些State或Props的变化不需要重新渲染,为了提高性能,可以在此函数中进行盘端,并返回false
  • componentWillUpdate():此函数在组件重新渲染之前立即被调用,在组件第一次渲染前不会被调用,在shouldComponentUpdate返回false的情况下也不会被调用,不要再此函数中进行setState操作
  • componentDidUpdate():此函数在组件重新渲染之后被立即调用,在组件第一次渲染前不会被调用,在shouldComponentUpdate返回false的情况下也不会被调用。此函数是DOM更新后进行操作的一个好时机
  • componentWillUnmount():此函数在组件被卸载和销毁前立即被调用,此函数可以做一些清除重置的操作,比如清空定时器、取消网络请求和移除事件的监听

组件间通信

  • 父子组件通信
    • 父组件向子组件传递数据:子组件通过this.props引用父组件传递的数据
    • 子组件向父组件传递数据:父组件将回调函数通过Props设置给子组件
  • 相互独立的组件通信
    • 共同的父级组件通信:子组件1先与父组件通信,再将数据传递到子组件
    • 通过事件系统通信:一个全局事件订阅和发布者。在订阅事件的同时最好为事件名指定一个命名空间,避免事件名的重复而导致混乱。订阅事件要在组件componentDidMount函数中进行,取消订阅在componentWillUnmount函数中进行

  转载请注明: Blog React学习(一)基础语法

 上一篇
React学习(二)用React的方式思考 React学习(二)用React的方式思考
参考资料 React官方文档 《移动Web前端高效开发实战》 React理念React 最初的目的是使用 JavaScript 创建大型的,快速响应的网络应用。React的众多优点之一是它让你在编写代码的时候同时也在思考你的应用。我们通过
2019-02-11
下一篇 
【博客分享】新的一年前端应该怎么学 【博客分享】新的一年前端应该怎么学
总结过去,展望未来 前端2018解读:吃瓜又一年 来自HackerRank的数据报告 JavaScript: 2018’s most popular language Languages developers want to lear
2019-02-06
  目录