React入门学习

laznrbfe 发布于2019-08-19 17:34 / 2648人阅读

摘要：对象的属性与组件的属性一一对应，但是有一个例外，就是属性，它表示组件的所有子节点。此外，还提供两种特殊状态的处理函数。组件中样式的写法这种方式错误使用这种方式，第一重大括号表示这是语法，第二重大括号表示样式对象。

如何渲染到容器

直接上代码：

    //第一个参数是构造的组件，第二个参数是使用组件的容器
    ReactDom.render( , document.getElementByID(""));

render渲染页面将组件放到选定的元素里面

如何定义组件

使用React.createClass({render:function(){return ( 我是dom元素 )}})构建

    var ProfilePic = React.createClass({
          render: function() {
            //可以在return前进行相关处理
            return (
                   
            );
        }
    });

1.return()括号中只能填写一个标签，否则报错
2.this.props是ReactDOM.render中传递的属性，是一个对象对于组件套组件的方式可以传递属性值，如下面例子

组件套组件

    // 渲染到容器
    ReactDOM.render(
        ,
         document.getElementById("example")
    );
    
    var Avatar = React.createClass({
          render: function() {
            return (
                  
                 //this.props包含了name和link的属性，同时在ProfilePic组件中可以使用this.props获取link的值
                    
                  
            );
          }
    });

如何设置某个变量的初始值

使用getInitialState:function(){return {}}声明初始化变量，使用this.setState({键值对})修改getInitialState函数中的变量，通过this.state对象获取属性的值，代码如下：

    var ClickApp = React.createClass({
    getInitialState:function(){
        return {
            clickCount: 0,                
        }
    },
    handleClick: function(e){
        this.setState({
            clickCount: this.state.clickCount + 1,
        });
    },
    render: function(){
        return (
            
                点击下面按钮
                
                你一共点击了：{this.state.clickCount}
            
        )
    }
    });

getInitialState在组件的生命周期内只会运行一次，用来设置组件的初始状态。

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性，它表示组件的所有子节点。
this.props.children的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object；如果有多个子节点，数据类型就是 array。React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object

PropTypes

验证组件提供的参数是否满足要求。如 propTypes: { title: React.PropTypes.string.isRequired },render:function(){return} 代码的作用就是说明title是必须填写的而且为字符串。使用 getDefaultProps来配置默认的字符串 getDefaultProps : function () { return { title : "Hello World"};},

组件的生命周期

生命周期分为三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

JSX转化器

1.内嵌的jsx代码，需要在script标签中要加上type="text/babel"，并引入browser.min.js5.8.24文件，或者使用bower install babel --save-dev下载babel文件中获取，将ES6转化为ES5
2.[已废弃]使用react-tools模块，将代码转化成线上代码使用npm install -g react-tools安装，使用jsx --watch src/ build/转化
3.可以直接使用babel转化，babel --presets react [es2015] src --watch --out-dir build，其中[es2015]是选填项，src是源文件路径 build是编译后的文件路径
4.在gulp中使用gulp-react转化

Html转义

对于某些富文本内容，在页面上显示

    var content="content";
    React.render(
        {content},
        document.body
    );
    
    //会直接显示 content 相当于ejs中<%= %>

Html默认会对Html文章转义，如何不转义

    var content="content";    
    React.render(
        ,
        document.body
    );

CDN文件

1.react
react 包括 React.createElement、 React.createClass、React.Component、 React.PropTypes、 React.Children
react-dom 包括 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode
react-dom-server 包括.renderToString 和 .renderToStaticMarkup
react-with-addons

HTML 标签 vs. React 组件

React.render方法可以渲染HTML结构，也可以渲染React组件。JSX使用首字母大小写来区分是本地组件类还是Html标签。
(1)渲染HTML标签，声明变量采用首字母小写

    var myDivElement = ;
    React.render(myDivElement, document.body);

(2)渲染React组件，声明变量采用首字母大写

    var MyComponent = React.createClass({/*...*/});
    var myElement = ;
    React.render(myElement, document.body);

Small Tips

1.数据的传递都是需要至于{}之中，包括赋值

,{}中的变量都是可以通过ReactDom.render时传入
2.使用default为前缀，加上Checked,Value等设置默认值，如defaultChecked,defaultValue等，在组件中使用已有的属性。
3.this.refs引用对象集合，在Dom元素上添加了ref属性后，就会将这个Dom元素添加到this.refs之中，在页面中这个标签的值是唯一的，this.refs.xxxx.value这种方式可以获取变量的值，ref是一种回调的原理，当子组件的该属性值改变，相应的值会回调给父组件
4.在组件实现时，return(
{ }
)中的{}可以加入大量的javascript处理函数，如下：

    return (
      
        {
          this.props.list.map(function (child) {
            return {child}
 //注意这种写法，{child}
          })
        }
      
    );

5.组件可以直接当做Dom标签一样使用，像button,h1等
6.与Javascript DOM中一样的写法，class对于className,html对应于htmlFor；另外，对于非html内置的属性，一定要加上data-，如

`
7.JSX 的基本语法规则

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；

遇到代码块（以 { 开头），就用 JavaScript 规则解析

8.this.props 和 this.state不同点
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是,this.props表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
9.组件中样式的写法：style="opacity:{this.state.opacity};"这种方式错误；使用 style={{opacity: this.state.opacity}}这种方式，第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
10.在componentDidMount中的设置请求返回的数据需要特别注意只有当数据返回回来才有效，通过 this.isMounted() 判读，或者直接使用promise的then方法.查看示例12

参考文档

1.阮一峰老师的[react-demos](https://github.com/ruanyf/react-demos)

云服务器 GPU云服务器编程学习入门学习学习机器学习入门学习入门入门机器学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78639.html

React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
React 可视化开发工具 Shadow Widget 非正经入门（之一：React 三宗罪）

摘要：前言非正经入门是相对正经入门而言的。不过不要紧，正式学习仍需回到正经入门的方式。快速入门建议先学会用拼文写文档注册一个账号，把库到自己名下，然后用这个库写自己的博客，参见这份介绍。会用拼文写文章，相当于开发已入门三分之一了。本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点，既作为用户手册的补充，也从更本质角度帮助大家理解 Shadow Widget 为什么这...

dongxiawu 2019-08-21 11:43 评论0 收藏0
前端学习资源整理

稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践栅格系统：详解CSS中的栅格系统媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

siberiawolf 2019-08-21 11:27 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0
前端学习资源

摘要：提供了完整的环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 react 新特性 react16 Context 算法相关图解排序算法(二)之希尔排序微信小程序微信小程序组件化的解决方案移动端尺寸基本知识浏览器前端必读：浏览器内部工作原理浏览器缓存原理解读浏览器加载css和js及dom解析之间的关系浏览器缓存 CSS学习移动web开发布局入...

zhisheng 2019-08-20 13:33 评论0 收藏0