您的位置: 首页  >  文章  >  react 基础语法

react 基础语法

分类: 文章 • 2025-05-04 09:36:28

1.可以在js里面不加引号直接写html

  var vDom = <div id="demo">Hello, React!</div>;  //不是字符串, 不能加引号

2. ReactDOM.render(vDom, containDiv);  第一个参数为虚拟DOM，后一个为真实容器

  render 把虚拟DOM 变为真实的dom，然后再插入

3.React能自动遍历显示数组中所有的元素（遍历数组的时候要有Key 唯一标识）

   array.map()的使用

 map 返回一个数组 而React正好可以自动遍历数组元素

<ul>{names.map((item, index)=><li key={index}>{item}</li>)}</ul>

JSX语法 

 var ele = <h1>Hello JSX!</h1>;
* 注意1: 它不是字符串, 也不是HTML/XML标签
* 注意2: 它最终产生的就是一个JS对象

标签中的js代码必须用{}包含
<h1 id='myTitle'>{title}</h1>

4. 定义组件

        //方式1: 工厂(无状态)函数(最简洁, 推荐使用)

    function MyComponent1() {

      return <h1>自定义组件标题11111</h1>
    }
    //方式2: ES6类语法(复杂组件, 推荐使用)
    class MyComponent3 extends React.Component {
      render () {
        return <h1>自定义组件标题33333</h1>
      }

    }

class MyComponent2 extends React.Component {
    render() {
      console.log(this, this instanceof MyComponent3);
      return <h1>ES6类语法--->自定义组件标题22222</h1>;
    }
  }

（思想:把render方法放在React.Component上，new一个实例的时候调用React.Component上的构造方法，调用render函数的是MyComponent2 这个实例对象）

2). 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example'));
注意:
  1). 返回的组件类必须首字母大写（和原生的html标签区别开来 原生HTML标签没有大写）
  2). 虚拟DOM元素必须只有一个根元素

  3). 虚拟DOM元素必须有结束标签

3. ReactDOM.render()渲染组件标签的基本流程
  1). React内部会创建组件实例对象 
  2). 得到包含的虚拟DOM并解析为真实DOM（会把原来的真实DOM中的东西覆盖)

  3). 插入到指定的页面元素内部

实例对象的三大属性：react 基础语法

ES6把方法的定义放到了原型上 以便代码复用

把构造函数放在实例中 创建实例的时候再调用原型上的构造方法

react 基础语法

react 基础语法

属性限制  并且只要Props有数据 那么它就是外部传入进来的，因为只读

react 基础语法

react 基础语法

传数据的时候可以   ...  运算符

react 基础语法

拆分组件 通常最外面 就是应用主组件APP 内层再写 

react 基础语法

工厂函数的this统一指向undefined

react 基础语法

可以使用声明式依赖注入

react 基础语法


refs 属性

1. 组件实例对象的3大属性之二: refs属性
  1). 组件内的标签都可以定义ref属性来标识自己
  2). 在组件中可以通过this.refs.refName来得到对应的真实DOM对象
  3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)
    * <input ref='username' />
    * this.refs.username //返回input对象
2. 事件处理
  1). 通过onXxx属性指定组件的事件处理函数(注意大小写)
    * React使用的是自定义(合成)事件, 而不是使用的DOM事件
    * React中的事件是通过委托方式处理的(委托给组件最外层的元素)
  2). 通过event.target得到发生事件的DOM元素对象
    <input onFocus={this.handleClick}/>
    handleFocus(event) {
      event.target  //返回input对象
    }
3. 强烈注意
  1). 组件内置的方法中的this为组件对象
  2). 在组件中自定义的方法中的this为null
    * 强制绑定this

    * 箭头函数(ES6模块化编码时才能使用)

注意在书写的时候input在JSX中一定要有结束标签

react 基础语法

特点 ：render（）方法中的this指向的是实例对象

而自定义的方法中的this 为null

react 基础语法


  refs 以及事件绑定

class RefsTest extends React.Component {
  constructor (props) {
   super(props);

    this.showMsg = this.showMsg.bind(this); // 强制给showMsg()绑定this(组件对象)
    this.handleBlur = this.handleBlur.bind(this);
  }

  showMsg() {
    // console.log(this); //this默认是null, 而不组件对象
    const input = this.refs.msg;
    alert(input.value);
  }

  handleBlur(event) {
    const input = event.target;
    alert(input.value);
  }

  render () {
    return (
      <div>
        <input type="text" ref="msg"/>
        <button onClick={this.showMsg}>提示输入数据</button>
        <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
      </div>
    );
  }
}

ReactDOM.render(<RefsTest/>, document.getElementById('example'));

react 基础语法

脚手架可以这样子写 箭头函数

react 基础语法


state

react 基础语法


 拆分组件的时候要以功能来拆分

state props区别：

1 state是内部数据，可以变化

2 props是外部数据，不可变化


组件生命周期： 组件只渲染一次，而没有重复挂载

    componentWillMount() {
      console.log('componentWillMount(): 将要初始挂载');
    }

发送Ajax请求可以在这两个当中发。写在componentWillMount()中，优点：可以避免挂载完成了，还没有数据显示。

缺点：由于得等待componentWillMount()完成后才能render(),所以当里面写太多任务时，会由于等待超时，渲染不成功。

    

componentDidMount() {

      console.log('componentDidMount(): 已经初始挂载');

相关推荐