React 入门、初阶的实用教程

香菊网 发表于: 2019-05-24 分类: js部分  前端front  H5部分  服务器  

 

组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离,React 得到了Facebook社区的支持,使得构建交互式UI非常容易,通过一个月的react运用总结了下面的小小结

 

1、安装

npm install -g create-react-app      // 全局下载 react

create-react-app my-app      // 创建自己的项目 my-app

cd my-app/     // cd到自己的文件夹

npm start    // 启动项目

2、react入口

import React from 'react';
import { render } from 'react-dom';

//所有的组件都是在 render 内调用 然后 通过DOM挂载来实现
var myDivElement = <div className="foo" />;
render(myDivElement, document.getElementById('mountNode'));

3、组件使用 / 动态渲染组件

import React from 'react';
import MyComponent from './MyComponet';

// 在子页面中
// react中 组件首字母必须大写 否则渲染不出来
class test1 extends React.Component {
  state = { }
  render(){
     const item = 1
     return (
       {item && (<MyComponent />)}
     )
  }
}

export default test1

4、设置state中的值

// 设置state中的值不能直接赋值
class test1 extends React.Component {
  state = {a:1,arr:['1']}
  change() {
    // 由于设置state是异步的
    // setState 第一个是设置的值 第二个是设置成功的回调
    this.setState({a:2},()=>{console.log(this.state)})

    // 设置数组技巧
    let arr = ['2','3']
    this.setState({ arr: [...this.state.arr, ...arr] })
  }

5、组件生命周期

// 装载之前调用一次
componentWillMount        可以修改state

// 装载完成之后调用一次
componentDidMount         可以修改state

//组件更新调用一次 
componentDidUpdate        可以修改state

// 卸载组件触发一次
componentWillUnmount      移除 事件监听、定时器

render                    不能更改state

 

6、父子组件传值

     点击 查看父子组件传值

 

 

标签: js部分前端frontH5部分服务器
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮