$ react中 的方法

2018-07-27 22:50:00 weixin_30251587 阅读数 1038

先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟关系,在同一个父元素下渲染。现在我们要在点击A的时候调用B中的方法

解决思路:主要是用到ref获取BContainer组件挂载之后的实例

render(){
    var b = null
    return(<BContainer ref={(node) => b = node}/>)
}

ref中的回调函数会在组件被挂载之后执行,参数是组件的实例,所以这个时候变量b就是被挂载的组件B的实例。

这个实例对象是connect包装过后的方法,我们可以用

b.getWrappedInstance()

来获取到被包装的组件,但是注意记得在connect函数那里要加上参数{ withRef:true }才行

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    null,
    { withRef: true }
)(B)

这样就可以获得B的实例了,就可以调用B中的方法了

还有要注意的,在B中定义方法时要这样定义

fun = ()=>{
}

这样相当于this.fun = ()=>{},如果你像成员函数(比如constructor)那样定义:fun(){}它是会绑定在对象的原型(_proto_)上,因为constructor也是在原型上的


 

转载于:https://www.cnblogs.com/maskmtj/p/9380064.html

2018-11-05 15:13:12 qq_35117024 阅读数 4034

一、定义&执行方法、获取this.state中的数据

       在react中定义方法的时候,可以在consructor()和render()平级定义方法,它们之间不能用逗号进行分割,如下所示:

 

 

上述定义的就是一个hello方法,向页面输出一段字母。

      如果我们定义一个方法去获取this.state中的msg的值的时候,会牵扯到一个this指向的问题,所以会报类似于“无法获取到state属性”的错误。以下是三种处理方式,通过下面每一种处理方式我们都能顺利的获取到this.state的值,如下:

1 我们在绑定事件的时候使用bind()方法来改变this的指向,如下:

 

 

2 第二种方法其实是第一种方法的改编版,就是在构造函数里现将this的指向通过bind来声明一下,然后我们绑定事件的时候像普通事件绑定那样操作就可以,如图:

3 第三种方法是使用ES6中的箭头函数来定义方法,此时绑定事件的时候可以用普通事件的绑定方式那样,但是还是可以获取到this.state的值,如下:

 

      以上三种方式都能解决this指向的问题,并且能获取到this.state的数据,通常来说,后面两种方式用得比较多。下面是最终的结果截图:

二、改变this.state中的数据

      改变this.state中msg的值的时候,我们所使用的是this.setState()方法,如图:

 

      同样,上述也存在this指向的问题,我们通过箭头函数来解决。

三、方法传参

      我们定义一个方法,通过此方法去改变this.state中的数据,但是改变后的数据是我们通过参数传递过去的,并不是在方法里面写好的值。

      如果要实现上述的功能,就要用到bind()方法,此时的bind方法接受两个参数,第一个参数是this,第二个参数就是我们要传递的值,如图:

 

 

      当然,我们也可以传递多个值过去,此时的方法就要定义多个值。

2018-03-03 15:49:57 well2049 阅读数 12856

在react项目中会使用函数是最基本的,如果是在普通的js文档中用特别简单,但是在react中,函数定义的方式,方法和位置都会决定使用方式的不同。
React项目中定义组件的方式有两种:
第一种就是函数式:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 或者
const hello = () => (
    <div>
        <h2>Draft</h2>
    </div>
);

第二种就是用到最多的通过class类来声明定义一个组件:

// 组件外定义的2个函数
function see(){}; //函数see()
const see2=()=>{}; // see2()

class Welcome extends React.Component {
// 组件内定义的函数

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

定义了组件以后,我们的函数就是要在组件内执行的,定义函数的方式也是有两种:
第一种就是通过function(){} 来定义。
第二种就是通过箭头方式来定义函数= () =>{}

注意如果是在组件外定义的箭头函数,必须要用const
或者let来装饰一下,不然就会报错或者执行不了,我多次尝试后发现的,不知为何,如果您知道,望友情提示一下。组件内定义函数就不必用const

在组件外定义的函数,在组件内使用时this.see
如果是在组件内部定义的,render() 方法之前定义的,在组件内使用直接onClick={see} 即可。

如果是要加载异步数据或者服务器数据的函数,必须要放到

componentDidMount() {
        this.getJsonData();
    }

在这里也可以看出如果在在render() 方法之前使用也是需要加this 之后的return() 就不需要加this 了。有关函数绑定this 的方法可以看我这篇文章

这都是在项目中遇到的,所以一点一点总结和积累一下,如果有理解不正确的地方请友情提示一下在留言区。

2019-01-22 11:44:22 zsm4623 阅读数 1805

在react中如果你想修改数据的话,必须使用this.setState()方法
可以在调用一个事件中使用this.setState()方法,从而达到修改数据的目的, 也可以用于文本框双向数据绑定
只能在render函数中更新

了解了基本概念及用法,我们来看一下setState的注意点:

  • setState通过引发一次组件的更新过程来引发重新绘制;
  • 多次setState函数调用产生的效果会合并;
  • setState不会立刻改变React组件中state的值。

setState通过引发一次组件的更新过程来引发重新绘制

setState调用引起的React的更新生命周期函数4个函数(比修改prop引发的生命周期少一个>componentWillReceiveProps函数),这4个函数依次被调用。

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

1. 如何书写setState

render(){
	//创建一个点击事件
	return<button onClick={()=>textCount()}></button>
}
//1. 一般这样写,如果新值依赖旧值的话容易出错,这时我们可以在写成一个函数形式,有两个参数分别为oldState, props,
// 分别代表旧值,和传的值
textCount = ()=>{
	// 里面是一个对象关系
	this.setState({
		count: this.state.count + 1
	})
}
// 多次调用会产出合并
handleClick = () => {
    this.setState({ count: this.state.count + 1, });
    console.log('第一次加一', this.state.count);   // 0
    this.setState({ count: this.state.count + 1, });
    console.log('第二次加一', this.state.count); // 0
}


//2. 常用的写法  是一个函数
textCount = ()=>{
	this.setState((oldState, props)=>{
	//该函数接收前一个状态值作为第 1 个参数, 并将更新后的值作为第 2 个参数:
		// 要有一个return, return代表的就是返回的新值
		return{
			count: this.state.count + 1
		}
	})
}

setState的第二个参数
这个第二个参数是指state已经更新后的回调函数,例如可以用于子组件给父组件传个值,比如是累加器,子组件加一,父组件也加一。

this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})

2. setState 能同步更新吗?

setState函数存在的一个重要意义就是它可以驱动视图的更新。如果仅仅想要改变state,我们可以直接对this.state对象进行操作:

  handleClick = () => {
    this.state.count++;
    console.log('this.state.count: ', this.state.count);
  }

  render() {
    console.log('触发更新');
    ...   
  }

控制台输出:

this.state.count:  1

可以看到,state值确实进行了操作,但是render函数却没有得到执行。这样的更新操作是没有意义的。
既然如此,那么setState会进行同步更新吗?答案是肯定的。
在React中,如果是由React引发的事件处理(比如通过onClick引发的事件处理),调用setState不会同步更新this.state,除此之外的setState调用会同步执行this.state。所谓“除此之外”,指的是绕过React通过addEventListener直接添加的事件处理函数,还有通过setTimeout/setInterval产生的异步调用。
在React的setState函数实现中,会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说,而isBatchingUpdates默认是false,也就表示setState会同步更新this.state,但是,有一个函数batchedUpdates,这个函数会把isBatchingUpdates修改为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,造成的后果,就是由React控制的事件处理过程setState不会同步更新this.state。
但是,setState的同步更新会导致严重的性能问题,我们在实际开发过程中应尽量避免使用。

3. setState可能是一个异步更新

2019-07-29 18:27:23 qq_40816649 阅读数 1599

在react脚手架创建的项目中,类似像axios请求这样的公共方法,需要给它设定到一个全局的方法中。|
对比vue,vue可以直接在main.js中直接Vue.prototype.$axios = function(){}这样的形式绑定全局的方法。这样就不用每一个vue文件都去引用axios这个文件了,也方便进行统一的管理。

那么react是不是也可以类似的在index.js中react.prototype绑定全局方法呢。答案是不行!!!

分析
直接在index.js中打印console.log(React.prototype)//undefined
和vue不一样,vue需要将vue new成对象才能使用并且每个vue文件直接通过this就能获取到vue对象上定义的东西。但是react不需要new成对象就可以直接使用。

方法
直接在index.js中

React.$axios = function () {}

绑定方法;然后每个子页面的js文件中React.$axios直接获取到这个方法

React中获取Dom方法

阅读数 2538