React详解

介绍：

React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，在13年f进行开源

17版本官网：React – A JavaScript library for building user interfaces

18版本官网：React 官方中文文档

特点：

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

一、基础

主要核心，依赖下面四个文件

    <!-- 引入核心库。全局出现React对象--><script type="text/javascript" src="./React-js/16.8/react.development.js"></script><!-- 用于支持react操作DOM。全局出现ReactDOM对象--><script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script><!-- 用于将jsx转换为js --><script text="text/javascript" src="./React-js/16.8/babel.min.js"></script><!-- 用于对组件标签属性进行限制。全局出现PropTypes对象 --><script src="./React-js/16.8/prop-types.js"></script>

1、基本使用

1.1、虚拟dom

关于虚拟DOM:

本质是object类型的对象(一般对象)
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM 上:那么多的属性。
虚拟DOM最终会被React转化为真实DOM。呈现在页面上

<body><div id="test"></div><!-- 引入核心库 --><script type="text/javascript" src="./React-js/16.8/react.development.js"></script><!-- 用于支持react操作DOM --><script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script><!-- 用于将jsx转换为js --><script text="text/javascript" src="./React-js/16.8/babel.min.js"></script><!-- 一定是babel --><script type="text/babel">// 创建虚拟domconst VDOM = <h1>Hello.React</h1>const VDOM2 = <h1>----------------</h1>// 渲染虚拟DOM到页面（后面的会替换之前）ReactDOM.render(VDOM,document.getElementById('test'))ReactDOM.render(VDOM2,document.getElementById('test'))</script>
</body>

2.2、JSX写法

1、全称: JavaScript XML。

2、react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖

3、作用: 用来简化创建虚拟DOM

写法：var ele = <h1>Hello JSX!</h1>

注意1：它不是字符串, 也不是HTML/XML标签

注意2：它最终产生的就是一个JS对象

4、jsx语法规则:

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用{}-
样式的类名指定不要用class，要用className.
内联样式,要用style={{key : value}}的形式去写。
只有一个根标签
标签必须闭合
标签首字母

(1).若小写字母开头，则将改标签转为htm1中同名元素，若htm1中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<body><div id="test"></div><!-- 引入核心库 --><script type="text/javascript" src="./React-js/16.8/react.development.js"></script><!-- 用于支持react操作DOM --><script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script><!-- 用于将jsx转换为js --><script text="text/javascript" src="./React-js/16.8/babel.min.js"></script><!-- js写法 --><script type="text/javascript">// 创建虚拟domconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'js写法'))// 渲染虚拟DOM到页面（后面的会替换之前）ReactDOM.render(VDOM, document.getElementById('test'))</script><!-- jsx写法 --><script type="text/babel">const data = ['抽烟','喝酒','烫头']const obj = {name1:'抽烟',name2:'喝酒',name3:'烫头'}const myId = 'song'const myData = 'HELLO'const VDOM = (<div><h1 className="box" id={myId}><span style={{ color: 'red', fontSize: '40px' }}>{myData.toLocaleLowerCase()}</span></h1><input type="text" /><ul>{// data   // 直接使用数组，会自动遍历// obj     // 对象，会报错data.map((item,i)=><li key={i}>{item}</li>)}</ul></div>)// 渲染虚拟DOM到页面（后面的会替换之前）ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>

2、函数式组件

 <script type="text/babel">// 定义函数组件function Demo() {console.log(this);  // 经过babel转化开启严格模式，this没有明确的调用，所以为undefinedreturn <h2>函数定义的组件</h2>}// 渲染组件到页面ReactDOM.render(<Demo />, document.getElementById('test'))/*执行了ReactDOM.render( <MyComponent/>.......之后，发生了什么?1.React解析组件标签,找到了MyComponent组件。2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOW转为真实DOM，随后呈现在页面中。*/</script>

3、类组件

<script type="text/babel">// 定义类组件class Demo extends React.Component{render(){// render：类的原型对象上(可在浏览器控制台输入Demo回车测试)，供实例使用// this指向Demo的实例对象。俗称：组件对象或组件实例对象console.log('render中this',this);return (<h2>类定义的组件</h2>)}}// 渲染组件到页面ReactDOM.render(<Demo />, document.getElementById('test'))/*执行了ReactDOM.render( <MyComponent/>.......之后，发生了什么?1.React解析组件标签,找到了MyComponent组件。2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法3.将返回的虚拟DOW转为真实DOM，随后呈现在页面中。*/</script>

4、组件的三大核心

4.1、state：存放状态

 <script type="text/babel">// 定义类组件class Weather extends React.Component {constructor(props) {    // 构造器只调用一次 super(props)// 初始化状态this.state = {isHot: false,wind: '大风'}// 改变原型上的demo的this指向，并把原型上的demo赋值到实例上的demo上。处理下面this为undefindthis.demo = this.demo.bind(this)}render() {     // 调用1+n次。1:初始化   n:状态更新的次数return (<h2 onClick={this.demo}>今天天气{this.state.isHot ? '炎热' : '很冷'}</h2>)}demo() {// demo放在哪里? Weather的原型对象上，供实例使用//由于demo是作为onclick的回调，所以不是通过实例调用的，是直接调用//类中的方法默认开启了局部的严格模式，所以demo中的this为undefinedconsole.log('this', this); // undefind// 不能直接修改值。数据虽然变化，但页面不刷新// this.state.isHot = !this.state.isHot// 注意：需要通过setState方法来修改状态this.setState({ isHot: !this.state.isHot })}}// 渲染组件到页面ReactDOM.render(<Weather />, document.getElementById('test'))function demo() {// console.log('被点击');alert('被点击')}</script>

(1)、state简写

<script type="text/babel">// 定义类组件class Weather extends React.Component {// 初始化状态state = { isHot: false, wind: '大风' }render() {    return (<h2 onClick={this.demo}>今天天气{this.state.isHot ? '炎热' : '很冷'}</h2>)}// 自定义方法---需要赋值语句的形式+箭头函数demo = ()=> {console.log('this', this); // undefindthis.setState({ isHot: !this.state.isHot })}}// 渲染组件到页面ReactDOM.render(<Weather />, document.getElementById('test'))</script><!-- 1、组件中 render方法中的this 为组件实例对象-2、组件自定义的方法中this为 undefined，如何解决?a.强制绑定this:通过函数对象bindb.箭头函数3、状态数据，不能直接修改或更新-->

4.2、props：接收参数

 <script type="text/babel">// 定义类组件class Weather extends React.Component {render() {console.log(this);return (<ul><li>姓名：{this.props.name}</li><li>性别：{this.props.sex}</li><li>年龄：{this.props.age}---{this.props.flag}</li></ul>)}}const p = { name: 'tom', age: 18, sex: '女' }// 渲染组件到页面ReactDOM.render(<Weather {...p} flag={666}/>, document.getElementById('test'))</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/658902.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！