react 基础语法

最新推荐文章于 2025-06-03 23:27:07 发布

Geek z

最新推荐文章于 2025-06-03 23:27:07 发布

阅读量1.3k

点赞数 1

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). 插入到指定的页面元素内部

实例对象的三大属性：

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

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

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

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

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

工厂函数的this统一指向undefined

可以使用声明式依赖注入

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中一定要有结束标签

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

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

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'));