react入门教程

1. ReactJS是什么?
  1). Facebook开源的一个js库
  2). 一个用于动态构建用户界面的js库
2. React的特点
    * Declarative(声明式编码)
    * Component- d(组件化编码)
    * Learn Once, Write Anywhere(支持客户端与服务器渲染)
    * 高效
    * 单向数据流

3. React高效的原因
  1). 虚拟(virtual)DOM, 不总是直接操作DOM
  2). 高效的DOM Diff算法, 最小化页面重绘

4. 模块与组件的概念
  * 模块: 向外提供特定功能的js程序, 一般就是一个js文件
              作用: 简化js的编写, 阅读, 提高运行效率
  * 组件: 用来实现特定功能效果的代码集合(html/css/js)
              作用: 复用, 简化项目编码, 提高运行效率
5. 模块化与组件化
  * 模块化:
     当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
  * 组件化:
    当应用是以多组件的方式实现功能, 这个应用就是一个组件化的应用

6.入门案例

react.js: React的核心库
react-dom.js: 提供操作DOM的扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

在页面中导入js

编码
  <  type="text/babel"> //必须用babel

 1 <div id="demo"></div>
 2 
 3 <  type="text/ " src="../js/react.js"></ >
 4 <  type="text/ " src="../js/react-dom.js"></ >
 5 <  type="text/ " src="../js/babel.min.js"></ >
 6 <  type="text/babel">
 7   //页面中的真实容器元素
 8   var containDiv = document.getElementById('demo');
 9   //react的虚拟DOM对象
10   var vDom = <div id="demo">Hello, React!</div>;  //不是字符串, 不能加引号
11   //将虚拟DOM对象渲染到页面元素中
12   ReactDOM.render(vDom, containDiv);
13   //页面结果: <div id="demo"><div id="demo">Hello, React!</div></div>
14 </ >

7.JSX语法

JSX 即   ，它是一种在React 组件内部构建标签的类 语法，使用JSX可以提高组件的可读性，因此推荐使用。JSX最终会被转换为 。
1⃣️React组件只能渲染一个根节点，这是由于js的特性，即return语句只能返回单个的值，解决办法是将要返回的值都包含在一个根对象中。 
2⃣️JSX不能使用if语句，可使用三元表达式替代，或者将条件语句移动到JSX外部。 

<  type="text/babel">
  //初始化动态数据
  var   = 'I Love you!';
  var myName = 'bww';
  //创建虚拟dom : JSX
  var vDOM = <h1 id="my " name={myName}>{ }</h1>;
  //将虚拟dom渲染中页面元素中
  ReactDOM.render(vDOM, document.getElementById('example1'));
</ >

8. 自定义组件(Component) :
  1). 定义组件
    //方式1: 工厂(无状态)函数(最简洁, 推荐使用)
    function MyComponent1() {
      return <h1>自定义组件标题11111</h1>
    }
    //方式2: ES6类语法(复杂组件, 推荐使用)
    class MyComponent3 extends React.Component {
      render () {
        return <h1>自定义组件标题33333</h1>
      }
    }
    //方式3: ES5老语法(不推荐使用了)
    var MyComponent2 = React.createClass({
      render () {
        return <h1>自定义组件标题22222</h1>
      }
    })
  2). 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example'));
注意:
  1). 返回的组件类必须首字母大写
  2). 虚拟DOM元素必须只有一个根元素
  3). 虚拟DOM元素必须有结束标签
ReactDOM.render()渲染组件标签的基本流程
  1). React内部会创建组件实例对象
  2). 得到包含的虚拟DOM并解析为真实DOM
  3). 插入到指定的页面元素内部

9.组件实例对象3大属性之一: props属性
  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props中
  3. 内部读取某个属性值: this.props.propertyName
  4. 作用: 通过标签属性从组件外向组件内传递数据(只读)
  5. 对props中的属性值进行类型限制和必要性限制
  Person.propTypes = {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number.isRequired
  }
  6. 扩展属性: 将对象的所有属性通过props传递
  <Person {...person}/>
  7. 默认属性值
  Person.defaultProps = {
    name: 'Mary'
  };
  8. 组件类的构造函数
  constructor (props) {
    super(props);
    console.log(props); // 查看所有属性
  }

 //缺失时设置默认属性
 Person.defaultProps = {
    sex: '男',
    age: 18
  };  
  //初始化数据
  let person = {name: 'atguigu', sex: '女', age: 3};
  //根据数据动态渲染组件标签
  /*ReactDOM.render(<Person name={person.name} age= 
  {person.age} sex={person.sex}/>,
      document.getElementById('example'));*/
  ReactDOM.render(<Person {...person}/>,
      document.getElementById('example'));

  const person2 = {name: 'kobe', sex: '女'};
  ReactDOM.render(<Person {...person2}/>, 
  document.getElementById('example2'));

 1 <  type="text/babel">
 2 //定义内部标题组件
 3   class Welcome extends React.Component {
 4     render() {
 5       return <h2>Welcome {this.props.name}!</h2>;
 6     }
 7   }
 8   Welcome.propTypes = {
 9     name: React.PropTypes.string.isRequired
10   };
11   //定义外部应用组件
12   class App extends React.Component {
13     render() {
14       return (
15         <div>
16           {
17             this.props.names.map(
18               (name, index) => <Welcome name={name} key={index}/>
19             )
20           }
21         </div>
22       );
23     }
24   }
25   App.propTypes = {
26     names: React.PropTypes.array.isRequired
27   };
28 
29   /**********************************************************/
30 
31   var names = ['Tom', 'Jack', "Bob"];
32   ReactDOM.render(<App names={names}/>, document.getElementById('example'));
33 </ >

View Code

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

 1 class RefsTest extends React.Component {
 2       constructor (props) {
 3        super(props);
 4 
 5         this.showMsg = this.showMsg.bind(this); // 强制给showMsg()绑定this(组件对象)
 6         this.handleBlur = this.handleBlur.bind(this);
 7       }
 8 
 9       showMsg() {
10         // console.log(this); //this默认是null, 而不组件对象
11         const input = this.refs.msg;
12         alert(input.value);
13       }
14 
15       handleBlur(event) {
16         const input = event.target;
17         alert(input.value);
18       }
19 
20       render () {
21         return (
22           <div>
23             <input type="text" ref="msg"/>
24             <button  ={this.showMsg}>提示输入数据</button>
25             <input type="text" placeholder="失去焦点提示数据"  ={this.handleBlur}/>
26           </div>
27         );
28       }
29     }

View Code

11.组件实例对象3大属性之: state属性
  1). 组件被称为"状态机", 通过更新组件的状态值来更新对应的页面显示(重新渲染)
  2). 初始化状态:
    constructor (props) {
      super(props)
      this.state = {
        stateProp1 : value1,
        stateProp2 : value2
      }
    }
  3). 读取某个状态值
    this.state.statePropertyName
  4). 更新状态---->组件界面更新
    this.setState({
      stateProp1 : value1,
      stateProp2 : value2
    })

12.受控组件

class TwoWay extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        msg: 'atguigu'
      }
      this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event) {
      let msg = event.target.value
      this.setState({msg})
    }

    render() {
      return (
        <div>
          <input type="text" value={this.state.msg}  ={this.handleChange}/>
          <p>{this.state.msg}</p>
        </div>
      )
    }
  }