(1.1)react组件es5

一个函数就是一个组件, 这个函数需要有一个return()

  1. import React from 'react';
  3. export default function() {
  4.     return(
  5.         <div>
  6.             <h4>es5组件</h4>
  7.             <p>
  8.                 hello react
  9.             </p>
  10.         </div>
  11.     );
  12. }

(1.2)react组件es6

  1. 需要提供constructor并执行super()
  2. 需要提供一个render方法 ```javascript import React from ‘react’;

class Demo extends React.Component{ constructor() { super(); }

  1. // 需要提供一个render方法
  2. render() {
  3.     return (
  4.         <div>
  5.             <h4>es6 组件</h4>
  6.             <p>
  7.                 hello react
  8.             </p>
  9.         </div>
  10.     )
  11. }

}

export default Demo;

  1. <a name="6fRJ3"></a>
  2. ## (2)react静态页面
  3. ```javascript
  4. import React from 'react'; 
  6. export default function() {
  7.     return(
  8.         <div>
  9.             <h4>静态页面</h4>
  10.             <div className="box" style={{border:'1px solid',color:'red'}}>
  11.                 阿斯顿发是的发送到发斯蒂芬阿瑟发斯蒂芬
  12.             </div>
  13.         </div>
  14.     )
  15. }

(3)react生命周期

  1. import React, { Component } from "react";
  3. class Demo extends Component {
  4.   constructor() {
  5.     super();
  6.   }
  8.   render() {
  9.       return <div>生命周期函数</div>
  10.   }
  12.   componentWillMount() {
  13.     console.log("组件将要挂载");
  14.   }
  16.   componentDidMount() {
  17.     console.log("组件已经挂载");
  18.   }
  19.   componentWillReceiveProps(newProps) {
  20.     console.log("组件将接收属性数据");
  21.   }
  22.   shouldComponentUpdate(nextProps, nextState) {
  23.     // 此生命周期用来优化性能
  24.     return true;
  25.   }
  26.   componentWillUpdate(nextProps, nextState) {
  27.     console.log("组件将要更新");
  28.   }
  29.   componentDidUpdate(prevProps, prevState) {
  30.     console.log("组件已经更新完毕");
  31.   }
  32.   componentWillUnmount() {
  33.     console.log("组件将要卸载");
  34.   }
  35. }
  37. export default Demo;

(4)jsx语法和注释

  1. import React from 'react';
  4. export default function() {
  5.     let person = {
  6.         username:'法外狂徒',
  7.         page: 100
  8.     } 
  9.     /**
  10.      *  jsx语法
  11.      * 1. 遇到<>,看做html来进行解析
  12.      * 2. 遇到{},看做是js来进行解析
  13.      * 3. 注释{/*  */}
  14.      */
  15.     return(
  16.         <div>
  17.             <p>姓名: {person.username}</p>
  18.             <p>年龄: {person.age}</p>
  19.         </div>
  20.     )
  21. }

(5.1)事件绑定

  1. import React from "react";
  3. class Demo extends React.Component {
  4.   constructor() {
  5.     super();
  6.     // 让test函数的this永远指向Demo实例
  7.     this.test = this.test.bind(this); 
  8.   }
  10.   test() { 
  11.     alert("哈哈哈哈哈哈哈");
  12.   } 
  14.   render() {
  15.     return (
  16.       <div>
  17.         <button onClick={this.test}>点我啊</button>
  18.       </div>
  19.     );
  20.   }
  21. }
  23. export default Demo;

(5.2)事件绑定

  1. import React from 'react';
  3. class Demo extends React.Component{
  4.     constructor() {
  5.         super();
  6.         this.test = this.test.bind(this);
  7.     }
  9.     test(data) {
  10.         console.log(data);
  11.     }
  13.     render() {
  14.         return(
  15.             <div>
  16.                 <button onClick={()=>{this.test('111')}}>张三</button>
  17.                 <button onClick={()=>{this.test('222')}}>李四</button>
  18.                 <button onClick={()=>{this.test('333')}}>王五</button>
  19.             </div>
  20.         )
  21.     }
  22. }
  24. export default Demo;

(6)列表渲染

  1. import React from 'react';
  4. class Demo extends React.Component{
  5.     constructor() {
  6.         super();
  7.     }
  9.     render() {
  10.         let list = [
  11.             {username:'zs1',age:20,id:"01"},
  12.             {username:'zs2',age:21,id:"02"},
  13.             {username:'zs3',age:22,id:"03"},
  14.             {username:'zs4',age:23,id:"04"},
  15.         ]
  17.         return(
  18.             <ul>
  19.                {
  20.                    list.map((item,index)=> {
  21.                        return (
  22.                         <li key={item.id}>
  23.                             {index+1}. <span>用户名: {item.username}</span> <span>年龄: {item.age}</span>
  24.                         </li>
  25.                        )
  26.                    })
  27.                }
  28.             </ul>
  29.         )
  30.     }
  31. }
  33. export default Demo;

(7)条件渲染

  1. import React from 'react';
  3. export default function() {
  4.     let isLogin = true; 
  5.     return (
  6.         <div>
  7.             <h4>条件渲染</h4> 
  8.             { isLogin? <p>138****0000</p>:
  9.                       <p>还没登录,<button>立即登录</button></p>  
  10.                   } 
  11.         </div>
  12.     )
  13. }

(8)state和setState

  1. import React from 'react';
  3. class Demo extends React.Component{
  4.     constructor() {
  5.         super();
  6.         this.state = {
  7.             isLogin: false
  8.         }
  9.         this.login = this.login.bind(this);
  10.     }
  12.     login() {
  13.         // 修改state里的状态
  14.         this.setState({
  15.             isLogin: true
  16.         });
  17.     }
  19.     render() {
  20.         console.log('执行render方法');
  21.         let {isLogin} = this.state;
  22.         return (
  23.             <div>
  24.                 <h4>条件渲染</h4> 
  25.                 { isLogin? <p>138****0000</p>:<p>还没登录,<button onClick={this.login}>立即登录</button></p>  } 
  26.             </div>
  27.         )
  28.     }
  29. }
  31. export default Demo;

(8.2)state和性能优化

  1. 只要执行setState, render函数默认会执行
  2. 使用shouldUpdateComponent进行性能优化, 只有当状态发生改变的时候在执行render函数 ```javascript import React from ‘react’;

class Demo extends React.Component{ constructor() { super(); this.state = { show: false } this.change1 = this.change1.bind(this); this.change2 = this.change2.bind(this); }

  1. change1() {
  2.     // 修改state里的状态
  3.     this.setState({
  4.         show: !this.state.show
  5.     });
  6. } 
  8. change2() {
  9.     // 修改state里的状态
  10.     this.setState({
  11.         show: true
  12.     });
  13. } 
  14. /**
  15.  * 优化性能
  16.  * @param {*} nextProps 下一个属性(新属性), nextState 
  17.  * @param {*} nextState 下一个state(新的状态)
  18.  * @returns 
  19.  */ 
  20. shouldComponentUpdate(nextProps, nextState) { 
  21.     // 新的状态和旧的状态的值相同时, 不重新渲染页面
  22.     if (this.state.show === nextState.show) {
  23.       // 返回false不重新渲染页面
  24.         return false;
  25.     } else {
  26.       // 返回true重新渲染页面
  27.         return true;
  28.     } 
  29.   }
  31. render() { 
  32.     console.log('重新渲染')
  33.     let {show} = this.state;
  34.     return (
  35.         <div>
  36.             <h4>state和render</h4>
  37.             <p>
  38.                 <button onClick={this.change1}>btn1</button>
  39.                 <button onClick={this.change2}>btn2</button>
  40.             </p>
  41.             {
  42.                show? <div>
  43.                <p>sdfasdfasdfasdfasdfasdfasdf</p>
  44.                <p>sdfasdfasdfasdfasdfasdfasdf</p>
  45.                <p>sdfasdfasdfasdfasdfasdfasdf</p>
  46.            </div>:'' 
  47.             } 
  48.         </div>
  49.     )
  50. }

}

export default Demo;

  1. <a name="OlAdG"></a>
  2. ## (9.1)表单输入
  3. 通过setState来显示用户的输入
  4. ```javascript
  5. import React from 'react';
  7. class Demo extends React.Component{
  8.     constructor() {
  9.         super();
  10.         this.state = {
  11.             username: ''
  12.         }
  13.         this.changeUsername = this.changeUsername.bind(this);
  14.     }
  16.     changeUsername() { 
  17.         this.setState({
  18.             username: event.target.value
  19.         })
  20.     }
  22.     render() {
  23.         return(
  24.             <div>
  25.                 <h4>表单输入</h4>
  26.                 <input type="text" value={this.state.username} onChange={this.changeUsername}/>
  27.             </div>
  28.         )
  29.     }
  30. }
  32. export default Demo;

(9.2)多个输入框

  1. import React from 'react';
  3. class Demo extends React.Component{
  4.     constructor() {
  5.         super();
  6.         this.state = {
  7.             username: '',
  8.             password:''
  9.         }
  10.         this.change = this.change.bind(this);
  11.     }
  13.     change() { 
  14.         // 获取输入的dom节点
  15.         let target = event.target;
  16.         // input标签上定义的name的值
  17.         let name = target.name; 
  18.         this.setState({ 
  19.            [name]: target.value
  20.         })
  21.     }
  23.     render() {
  24.         return(
  25.             <div>
  26.                 <h4>表单输入</h4>
  27.                 <input placeholder="用户名" type="text" name="username" value={this.state.username} 
  28.   onChange={this.change}/>
  29.                 <input placeholder="密码" type="text" name="password" value={this.state.password} 
  30. onChange={this.change}/>
  31.             </div>
  32.         )
  33.     }
  34. }
  36. export default Demo;

(10)获取真实的 DOM 节点

  1. import React from "react";
  3. class Demo extends React.Component {
  4.   constructor() {
  5.     super();
  6.     this.handleClick = this.handleClick.bind(this);
  7.   }
  9.   handleClick() {
  10.       // 让输入框获得焦点
  11.     this.refs.inp.focus();
  12.   }
  14.   render() {
  15.     return (
  16.       <span onClick={this.handleClick} style={{background:'#fff',display:'inline-block',width:'100px',height:'30px',border:'1px solid'}}>
  17.         <input ref="inp" type="text" style={{width:'80%', border: 'none', outline: 'none'}}/>
  18.       </span>
  19.     );
  20.   }
  21. }
  23. export default Demo;

(11)父子组件通信

  1. // 父组件
  2. import React from 'react';
  3. import Son from './Son'
  5. class Father extends React.Component{
  6.     constructor() {
  7.         super();
  8.         this.getMsg = this.getMsg.bind(this);
  9.     }
  11.     // 接收子组件传过来的数据
  12.     getMsg(data) {
  13.         console.log(data);
  14.     }
  16.     render() {
  17.         return(
  18.             <div>
  19.                 <h3>父组件</h3>
  20.                 <hr/>
  21.                 {/* 给子组件传递属性和方法 */}
  22.                 <Son msg="hello son" getMsg={this.getMsg}/>
  23.             </div>
  24.         )
  25.     }
  26. }
  28. export default Father;
  30. // 子组件
  31. import React from 'react';
  33. class Son extends React.Component{
  34.     constructor() {
  35.         super();
  36.     }
  38.     render() {
  39.         let {msg,getMsg} = this.props;
  40.         return(
  41.             <div>
  42.                 {msg}<br/>
  43.                 {/* 调用父组件传过来的方法,并传递数据 */}
  44.                 <button onClick={()=>{getMsg('哈哈哈哈哈')}}>发送消息</button>
  45.             </div>
  46.         )
  47.     }
  48. }
  50. export default Son;