【教程】react教程（精简）

作者: giraffecode9668 | 来源:发表于2019-11-17 00:45 被阅读0次

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 应用的最小单位，它用于描述屏幕上输出的内容，有：const，let，var

三者区别：

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

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

2、常用函数

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

// 定义一个元素
const element = <h1>Hello, world!</h1>;

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

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

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

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

// props是参数，方法之中获得参数，直接调用props.自定义.xx
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

<Clock date={new Date()} />

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

// React内置render调用方法，需要调用参数时，应该取变量this.props.xx.xx
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

<Clock date={new Date()} />

函数5：JSX支持JavaScript表达式，表达式写在{}中

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

函数6：JSX元素支持样式

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

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

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

函数8：JSX支持元素数组

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

函数9：&&运算

// true && 输出；false && 什么也不做
{
     unreadMessages.length > 0 &&
        <h2>
          您有 {unreadMessages.length} 条未读信息。
        </h2>
  }

函数10：三目运算

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

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

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);

ReactDOM.render(
  <ul>{numbers}</ul>,
  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 (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);

/**
 * 方法二
 */
 this.setState({
      date: new Date()
    });

函数13：replaceState，setProps，replaceProps，forceUpdate，findDOMNode，isMounted

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 (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  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 (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
 
 
 
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  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 (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

/**
 * 方法二：方法调用中绑定
 */
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 (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

/**
 * 方法三：使用function方法调用
 */
class LoggingButton extends React.Component {
  handleClick(e) {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

/**
 * 方法四：使用function方法调用
 */
class LoggingButton extends React.Component {
  handleClick = () => {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

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教程（精简）

本文链接：https://www.haomeiwen.com/subject/hgwuictx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

【教程】react教程（精简）

react 教程

一、React安装

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

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

3、项目目录结构

二、React技术

1、元素表示

2、常用函数

3、生命周期

4、点击事件

5、AJAX请求

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

【教程】react教程（精简）

react 教程

一、React安装

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

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

3、项目目录结构

二、React技术

1、元素表示

2、常用函数

3、生命周期

4、点击事件

5、AJAX请求

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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