2018-08-16 19:27:48 Night_Emperor 阅读数 573
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

 

安装脚手架create-react-app

npm install -g create-react-app

创建项目react-learn

create-react-app react-learn

启动项目

cd react-learn
npm start

本次是学习react-router-dom,首先安装react-router-dom包

npm install react-router-dom --save

App.js文件内容

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about/haha/xixi/hehe">About</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about/:id/:name" component={About} />
    </div>
  </Router>
);


class Home extends Component{
	constructor(props){
		super(props)
		this.handleClick=this.handleClick.bind(this);
		this.goBack=this.goBack.bind(this)
	}
	
	handleClick(){
		this.props.history.push('/about')
	}
	goBack(){
		this.props.history.goBack()
	}
	render(){
		console.log(this.props);
		return(
			<div>
	    	    <h2>Home</h2>
                <button onClick={this.handleClick}>跳转到About</button>
                <button onClick={this.goBack}>返回</button>
	        </div>
	    )
	}
}

const About = (props) =>{
	console.log(props)
	return (
		<div>
    	<h2>About</h2>
		</div>
	)
}


class App extends Component {
  render() {
    return (
      <BasicExample/>
    );
  }
}

export default App;

点击About,页面跳转到http://localhost:3000/about/haha/xixi/hehe

About组件的props有三个属性history、location和match

先看match属性


match:
{
   isExact:false,
   params:{id:"haha",name:"xixi"},
   path:"/about/:id/:name",
   url:"/about/haha/xixi"
}

//isExact表示浏览器中的路径和Route中的path是否是精准匹配
//http://localhost:3000/about/haha/xixi/hehe不是精准匹配
//在浏览器地址栏输入http://localhost:3000/about/haha/xixi,isExact的值就是true

//params代表传递的参数

//path 设置匹配路径格式

//url 表示浏览器路径中匹配path的部分,而不是整个路径,只是正确匹配部分
//http://localhost:3000/about/haha/xixi/hehe,  path:"/about/:id/:name"
//所以匹配部分就是/about/haha/xixi







再来看一下,路由组件上有哪些信息,路由就是组件。

<Route path="/about/:id/:name" component={About} />

有Props 、State和Context,证明了路由就是组件

Props上有component属性存放的是About组件

 

history属性

点击Home,进入Home页面

点击跳转About按钮,就会跳转到About页面,点击返回,跳转到上次的路由,这是利用了Props中的history属性

push()函数可以用来跳转

goBack()跳转到上一级

listen(fn)监听路由变化:每次路由跳转,执行fn

history.listen((location)=>{console.log(location)})

当路由跳转到http://localhost:3000/about/haha/xixi/hehe

listen()函数实际上把fn添加到一个队列中,每次路由跳转,执行队列中的函数,

如果history.listen((location)=>{console.log(location)})执行了两次,此时队列中含有两个匿名函数

(location)=>{console.log(location),每次路由跳转打印两次参数location。

 

history:{
    action:"POP"
    block:block()
    createHref:createHref()
    go:go()
    goBack:goBack()
    goForward:goForward()
    length:5
    listen:listen()
    location:{…}
    push:push()
    replace:replace()
}

location属性

在浏览器地址栏中输入http://localhost:3000/about/haha/xixi/hehe?age=18

location:{
    hash:"",
    pathname:"/about/haha/xixi/hehe",
    search:"?age=18"
}

 

WithRouter

现在给About组件添加一个子组件AboutChild,观察AboutChild组件的props值是Empty object,这是因为

<Route path="/about/:id/:name" component={About} />

只能给About组件的props属性上添加history、location和match属性,不会给AboutChild组件的props属性上添加这三个属性。

如果要给AboutChild组件的props添加history、location和match属性,需要使用WithRouter。

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link ,withRouter} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about/haha/xixi/hehe">About</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about/:id/:name" component={About} />

    </div>
  </Router>
);


class Home extends Component{
	constructor(props){
		super(props)
		this.handleClick=this.handleClick.bind(this);
		this.goBack=this.goBack.bind(this)
	}
	
	handleClick(){
		this.props.history.push('/about')
	}
	goBack(){
		this.props.history.goBack()
	}
	render(){
		console.log(this.props);
		return(
			<div>
	    	<h2>Home</h2>
        <button onClick={this.handleClick}>跳转到About</button>
        <button onClick={this.goBack}>返回</button>
	    </div>
	  )
	}
}

const About = (props) =>{
	console.log(props)
	return (
		<div>
    	<h2>About</h2>
    	<AboutChildWithRouter/>
		</div>
	)
}

const AboutChild =  (props) => {
	console.log(props)
	return (
		<div>AboutChild</div>
	)
}
 const AboutChildWithRouter = withRouter(AboutChild)
class App extends Component {
  render() {
    return (
      <BasicExample/>
    );
  }
}

export default App;

使用create-react-app脚手架时,生成的public文件夹可以当成一个小型的服务器,例如,public文件夹下有一个manifest.json文件,当在浏览器地址栏中输入http://localhost:3000/manifest.json,在路由中找不到对应的匹配时,就会去public文件夹下寻找。

在浏览器地址栏输入http://localhost:3000/manifest.json,浏览器页面显示

 

2016-08-21 13:25:14 ymc2015 阅读数 186
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁
2016-06-07 17:38:11 samete 阅读数 3901
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

index,jsx(入口文件)

import '../common/lib';
import App from '../component/App';
import ReactDOM from 'react-dom';
import React from 'react';
import { Link } from 'react-router';

import { Router, Route, Redirect, IndexRoute } from 'react-router';
import { hashHistory } from 'react-router'

import Menu from '../component/Menu';
import Text1 from '../component/Text1';
import Text2 from '../component/Text2';

ReactDOM.render((
		<Router history={hashHistory}>
			<Route path="/" component={App}>
				<IndexRoute component={Text1}/>
				<Route path="menu" component={Menu}/>
				<Route path="text1" component={Text1}/>
				<Route path="text2" component={Text2}/>
			</Route> 
		</Router>
	), document.getElementById('react-content'));

App.jsx

import React from 'react';
import { Link } from 'react-router';
import './App.less';
import Menu from '../component/Menu';


class App extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<div>
				<nav>
					<h3>总菜单</h3>
					<Menu/>
				</nav>
				{this.props.children}
				
			</div>
		)
	}
}


export default App;


Menu.jsx

import React from 'react';
import { Link } from 'react-router';
import Text1 from '../component/Text1';
import Text2 from '../component/Text1';

class Menu extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<div>
				<ul>
					<li><Link to="text1">text1</Link></li>
					<li><Link to="text2">text2</Link></li>
				</ul>
			</div>
		)
	}
} 

export default Menu;

Text1.jsx

import React from 'react';
import { Link } from 'react-router';

class Text1 extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<h3>你好,这里是text1</h3>
		)
	}
} 

export default Text1;

Text2.jsx

import React from 'react';
import { Link } from 'react-router';

class Text2 extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<h3>你好,这里是text2</h3>
		)
	}
} 

export default Text2;



2018-10-21 22:31:04 huangpb123 阅读数 145
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁

数组和迭代器循环出的 DOM 元素要设置唯一的,固定不变的 key 值。

设置了 key 以后,页面更新时,React 会根据这个 key,只更新或重新渲染更改的组件,没有更改的组件则直接移动,而不是将它们从 DOM Tree 中移除然后再将它们重新创建,实现了复用,提高了渲染效率。

Key 是 React 识别 DOM 元素的唯一标识,不真实存在,也不能被 Props 读取。React 根据 Key 来决定是销毁重建组件还是更新组件。

不建议使用 index 作为 key 值,有时候会出现意想不到的结果。

来看个使用 index 作为 key 的反模式例子:

export default class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            arr: ['a','b','c']
        }
    }

    reverse = () => {
        this.setState({
            arr: this.state.arr.reverse()
        })
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.arr.map((item, idx) => {
                            return <li key={idx}>{item}<input /></li>
                        })
                    }
                </ul>
                <button onClick={this.reverse}>reverse</button>
            </div>
        )
    }
}

点击了 reverse 按钮后变成了这样

显然这个效果不是我们想要的。

出现这个情况,是因为 React 是以 key 来唯一标识组件的,当发现 update 前和 update 后 key 值没有变化,react 就会认为 update 前后是同一个组件,进而只会对内部的属性进行修改。拿上述例子分析,react 会作出这样的判断:

  • 检查 key 值,发现都是0,判定为同一个组件;
  • 检查 item 部分,发现有变化,重新渲染这部分;
  • 检查 input 部分,发现不依赖 state 和 props,所以不进行重新渲染;

优化方法:

用 item 作为 key 值。

 

 

2019-10-30 19:21:19 qq_40944918 阅读数 6
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57542 人正在学习 去看看 李宁
  1. 条件渲染:

    if(布尔值){
        return(jsx)
    }else{
        return (jsx)
    }
    条件是否成立&&模块显示隐藏
    三目运算: 条件?模块:模块
    注:阻止条件渲染时,不使用DOM内容情况下返回null,数据类型保持一致
    
  2. 列表渲染:使用map方法进行遍历

    react中无论后期列表是否进行变动,都需要给遍历的虚拟DOM加上唯一的key,否则控制台会抛出警告,一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串,万不得已可以使用元素索引index作为key,如果列表项目的顺序可能会变化,不建议使用索引来用作key值,因为这样做会导致性能变差,还可能引起组件状态的问题

  3. 受控组件:使React的state成为“唯一数据源”。渲染表单的React组件还控制着,用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素叫做“受控组件”,使用value值需要和onChange方法进行配合,否则控制台抛出警告,textarea和select的数据来源也需要使用value形式配合state中的值取使用

  4. Refs选取真实DOM

    • DOM行间 ref=‘属性名’ 使用时:this.refs.属性名

    • DOM行间 ref= {(ref)=>this.属性名=ref} 使用时:this.属性名

    • DOM行间 ref = {this.属性名} 需要在constructor下去创建,this.createRef(), 使用时,this.属性名.current

5.父传子:props

 <Child sendMsg={this.state.parentMsg}/>

6.子传父 :

在子组件state中定义数据
在子组件方法中定义自定义事件
子组件调用处使用自定义事件触发父级中的方法
父级中的方法使用形参接收传递过来的数据
  1. 兄弟传值:把子组件A传给父组件的数据再使用props传递给子组件B

  2. 跨组件的数据双向绑定

    • 父组件定义数据,在子组件定义input需要去改动父组件中的数据

    • 把父组件的数据使用props传递给子组件,绑定到子组件input的value

    • input要变动数据需要使用onChange,改变父组件中的数据

    • 在父组件中定义方法,把方法通过props传递给子组件,子组件使用onChange调用

      父组件传递过来的方法去修改父组件的值

    • constructor(props)和this.props等价

react

博文 来自: chern1992
没有更多推荐了,返回首页