【教程】react教程(精简)

【教程】react教程(精简)

react 教程 一、React安装 参考:小结点node博客-react的安装与使用 1 、 使用npm安装脚手架工具create-react-app npm install -g create-react-app 2、使用脚手架工具create-react-app创建项目 - 在需要创建项目的位置打开命令行 - 输入create-react-app + 项目...

react 教程

一、React安装

参考:小结点node博客-react的安装与使用

1 、 使用npm安装脚手架工具create-react-app

npm install -g create-react-app

2、使用脚手架工具create-react-app创建项目

- 在需要创建项目的位置打开命令行
- 输入create-react-app + 项目名称的命令,比如:
create-react-app todolist
- 当项目创建完成后,可以进入项目,并启动:
cd todolist
npm start
  • 项目启动之后浏览器显示
react启动.png

新生命周期.png

3、项目目录结构

参考:菜鸟教程

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json   
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

二、React技术

1、元素表示

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容,有:constletvar

三者区别:

  • const 在 ES6 中,const 只限制对应的变量不能够被再次赋值;但是变量的属性可以被再次赋值。
  • let 避免重复定义了变量,无意间修改了全局变量;是定义block local variable的。
  • var 非常灵活

参考 :ES6 中 let, var, const 的区别

2、常用函数

函数1:ReactDOM.render(x,x);渲染元素

// 定义一个元素
const element = 

Hello, world!

; /** * ReactDOM.render(标签元素内容, document.getElementById('元素id')) * 将元素内容渲染到指定元素 */ ReactDOM.render( element, document.getElementById('divId') );

函数2:setInterval(function, 秒数);计时器

function tick() {
  const element = (
    

Hello, world!

现在是 {new Date().toLocaleTimeString()}.

); ReactDOM.render( element, document.getElementById('example') ); } setInterval(tick, 1000);

函数3:function name(参数)方法可以成为一个元素

// props是参数,方法之中获得参数,直接调用props.自定义.xx
function Clock(props) {
  return (
    

Hello, world!

现在是 {props.date.toLocaleTimeString()}.

); }

函数4:class name extends React.Component{}类可以成为一个元素

// React内置render调用方法,需要调用参数时,应该取变量this.props.xx.xx
class Clock extends React.Component {
  render() {
    return (
      

Hello, world!

现在是 {this.props.date.toLocaleTimeString()}.

); } }

函数5:JSX支持JavaScript表达式,表达式写在{}中

ReactDOM.render(
    

{1+1}

, document.getElementById('example') ); ReactDOM.render(

{i == 1 ? 'True!' : 'False'}

, document.getElementById('example') );

函数6:JSX元素支持样式

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    

菜鸟教程

, document.getElementById('example') );

函数7:html注释需写在{}中

ReactDOM.render(
    

菜鸟教程

{/*注释...*/}
, document.getElementById('example') );

函数8:JSX支持元素数组

var arr = [
  

菜鸟教程

,

学的不仅是技术,更是梦想!

, ]; ReactDOM.render(
{arr}
, document.getElementById('example') );

函数9:&&运算

// true && 输出;false && 什么也不做
{
     unreadMessages.length > 0 &&
        

您有 {unreadMessages.length} 条未读信息。

}

函数10:三目运算

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    
{isLoggedIn ? ( ) : ( )}
); }

函数11:map列举,注意使用map时最好加上key

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  
  • {numbers}
  • ); ReactDOM.render(
      {numbers}
    , document.getElementById('example') );

    函数12:this.setState设置状态

    /**
     * 方法一
     */
     class Counter extends React.Component{
      constructor(props) {
          super(props);
          this.state = {clickCount: 0};
          this.handleClick = this.handleClick.bind(this);
      }
      
      handleClick() {
        this.setState(function(state) {
          return {clickCount: state.clickCount + 1};
        });
      }
      render () {
        return (

    点我!点击次数为: {this.state.clickCount}

    ); } } ReactDOM.render( , document.getElementById('example') );
    /**
     * 方法二
     */
     this.setState({
          date: new Date()
        });
    

    函数13:replaceStatesetPropsreplacePropsforceUpdatefindDOMNodeisMounted

    3、生命周期

    旧的生命周期

    旧生命周期.png

    新的生命周期

    新生命周期.png

    通过对state变量更新自动更新组件

    • 调用componentDidMount()componentWillUnmount()钩子
    • componentDidMount() 中添加更新state,使用定时器等
    • componentWillUnmount()中卸载缓存,定时器等
    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
     
      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
     
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
     
      tick() {
        this.setState({
          date: new Date()
        });
      }
     
      render() {
        return (
          

    Hello, world!

    现在是 {this.state.date.toLocaleTimeString()}.

    ); } } ReactDOM.render( , document.getElementById('example') );

    fuction 中的this是function本身,JSX表达式{}中this时Component类的指代

    state 和 props的区别

    • state是组件自身拥有,自身可以改变;
    • props是父组件传递下去的,自身不可以改变
    class WebSite extends React.Component {
      constructor() {
          super();
     
          this.state = {
            name: "菜鸟教程",
            site: "https://www.runoob.com"
          }
        }
      render() {
        return (
          
    ); } } class Name extends React.Component { render() { return (

    {this.props.name}

    ); } } class Link extends React.Component { render() { return ( {this.props.site} ); } } ReactDOM.render( , document.getElementById('example') );

    props 设置默认值

    HelloMessage.defaultProps = {
      name: 'Runoob'
    };
    

    4、点击事件

    • onClick={}

    • {}调用的是中间变量,存在的问题是事件的this指代的实例会消失

    参考:React事件处理函数必须使用bind(this)的原因

    /**
     * 方法一:构造器绑定
     */
    class Popper extends React.Component{
        constructor(){
            super();
            this.state = {name:'Hello world!'};
        }
        
        preventPop(name, e){    //事件对象e要放在最后
            e.preventDefault();
            alert(name);
        }
        
        render(){
            return (
                

    hello

    {/* 通过 bind() 方法传递参数。 */} Click
    ); } }
    /**
     * 方法二:方法调用中绑定
     */
    class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
     
        // 点击事件的方法绑定当前实例
        this.handleClick = this.handleClick.bind(this);
      }
     
      handleClick() {
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }));
      }
     
      render() {
        return (
          
        );
      }
    }
     
    ReactDOM.render(
      ,
      document.getElementById('example')
    );
    
    /**
     * 方法三:使用function方法调用
     */
    class LoggingButton extends React.Component {
      handleClick(e) {
        console.log('this is:', this);
      }
     
      render() {
        //  这个语法确保了 `this` 绑定在  handleClick 中
        return (
          
        );
      }
    }
    
    /**
     * 方法四:使用function方法调用
     */
    class LoggingButton extends React.Component {
      handleClick = () => {
        console.log('this is:', this);
      }
     
      render() {
        //  这个语法确保了 `this` 绑定在  handleClick 中
        return (
          
        );
      }
    }
    

    5、AJAX请求

    • React本身不带有发送ajax的库,所以需要使用其他库
    • axios
    • fetch
    • jquery
    /**
     * 使用jquery
     */
    $.get(this.props.source, function (result) {
          var lastGist = result[0];
          this.setState({
            username: lastGist.owner.login,
            lastGistUrl: lastGist.html_url
          });
        }.bind(this));
      )
      
    /**
     * 使用axios
     */
     axios.post(url,{参数对象})
          .then(response=>{
            console.log(response)
          })
          .catch(error =>{
                console.log(error.message)
          })
    
    /**
     * 使用fetch
     */
    loadCommentsFromServer: function() {
        fetch(this.props.url).then(function(response){
            // 在这儿实现 setState
        });
    }
    
    // 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
    componentWillUnmount() {
        this.serverRequest.abort();
      }
    

    文章来源于互联网:【教程】react教程(精简)

    0

    评论0

    鱼翔浅底,鹰击长空,驼走大漠
    没有账号? 注册  忘记密码?