1. react中函数调用方法
方式一：内联调用法
import React, { Component }from 'react';
class funcextends Component{
constructor(porps){
super(props);
}
funcOne(){
console.log('内联调用法')
}
render(){
return (
)
}
}
方式二：配置中调用法
import React, { Component }from 'react';
class funcextends Component{
constructor(porps){
super(props);
this.funcTwo =this.funcTwo.bind(this)
}
funcTwo(){
console.log('配置中调用法')
}
render(){
return (
)
}
}
方式三：箭头函数调用法（最推荐）import React, { Component }from 'react';
class funcextends Component{
constructor(porps){
super(props);
}
funcThree:() => {
console.log('箭头函数调用法')
}
render(){
return (
)
}
}
2. react 调用方法
情况一：
constructor(props) { super(props); this.login = this.login.bind(this);
}
login(a,b,c) { console.log(this);//打印这个组件本身
console.log(a);//打印111111
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login(111111)}} />
情况二：
constructor(props) { super(props); this.login = this.login.bind(this);
}
login(a,b,c) { console.log(this);//打印这个组件本身
console.log(a);//打印Proxy对象：Proxy里面可以获得dom元素
console.log(b);//打印event
console.log(c);//undefined}
<button onClick={this.login} />
情况三：
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(a,b,c) { console.log(this);//打印这个组件本身，说明我们用箭头函数的时候，不需要bind(this),react自动把this指向了组件自己，
console.log(a);//打印出了111111
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login(111111)}} />
情况四：
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(a,b,c) { console.log(this);//打印null,这是react最常见的坑，this本来指向window，但是经过react初始化之后，指向了null;
console.log(a);//打印Proxy对象：Proxy里面可以获得dom元素
console.log(b);//打印event
console.log(c);
}
<button onClick={this.login} />
情况五：
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(a,b,c) { console.log(this);//打印这个组件本身
console.log(a);//undefined
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login()}} />
情况六：(可以算作es5的最佳实践，用的es5的方法，拿到所有参数)
constructor(props) { super(props); // this.login = this.login.bind(this);
this.login=(a,b,c)=>{ console.log(this);//打印这个组件本身
console.log(a);//111111
console.log(b);//打印Proxy对象：Proxy里面可以获得dom元素
console.log(c);//打印event：
}
}
<button onClick={this.login.bind(this,111111)} />
最佳实践：(for es6) 老版本
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(type,event,proxy) { console.log(this);//打印这个组件本身
console.log(event);//打印event：
console.log(proxy);//打印Proxy对象,event详情请查验es6}
<button onClick={()=>{let target=this, handler={};this.login('boss',event,new Proxy(target, handler))}}/>
最佳实践：2018（需要传参）
constructor(props) { super(props);
}
login=(num, evt)=>{ console.log(num);//打印传参
console.log(evt);//打印event：}
<button onChange={this.login.bind(null, 111)}/>
最佳实践：2018（不需要传参）
constructor(props) { super(props);
}
login=( evt)=>{ console.log(evt);//打印event：}
<button onChange={this.login}/>
3. react 函数式组件ref的使用
1、ref的定义
React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对组件进行修改
场景，点击A调用B的方法：（单文件中使用ref）
1、引入useRef并定义ref对象
2、绑定ref对象
3、调用
点击上传图片按纽时，调用ref对象的方法
4. React 类组件和函数组件
1、组件：能跟其他物件组合起来的物件
2、就目前而言，一个返回React元素的“函数”就是组件
3、在Vue里，一个构造选项就可以表示一个组件
元素与组件
元素：const div = React.createElement('div',...)
//这是一个React元素（d是小写的）
组件：const Div = ()=>React.createElement('div'..)
//这是一个React组件（D是大写的）
1、类组件
类组件注意事项：
2、函数组件
函数组件注意事项：
没有 this，一律使用参数和变量
类组件的事件绑定
但这样写不如声明addN结构清晰
最终的方案,类组件的事件绑定最好的方法
5. react函数式组件及类式组件
函数式组件中this是undefined，需注意。
1.React解析组件标签，找到了MyComponent组件；
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟dom转为真实dom，渲染在页面。
1.React解析组件标签，找到了MyComponent组件;
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法;
3.将render返回的虚拟dom转为真实dom，渲染在页面。
6. 【译】在 React 中拥抱函数——无状态函数式组件及其重要性
本篇文章 不是向您介绍任何最佳实践 或者使用 React 编写应用的某个“唯一方式”。
本文讲述的都是关于 React 中的 无状态函数式组件 (stateless functional component) 以及为什么它们可能有用或为什么应首先受到考虑。
在我们探讨这个问题之前，我们先了解一下在 React 上下文中函数式组件的定义。它本质上就是一个常规的函数，接收一个 props 并返回一个元素。
使用 ES6 的 箭头函数 和 解构 ，我们也可以这样编写：
初看，这与使用 createClass 和 ES6 Class 并没有什么特别之处，无状态函数式组件仅仅是一种编写风格。但是从我的观点来看却有很多不同。
现在让我们看一下函数式组件和基于类的方式的不同之处，并根据给定的事实，我们能推导出什么有价值的内容。
函数式组件，有时也被称为 无状态组件 ，没有任何生命周期方法，意味着每次上层组件树状态发生变更时它们都会重新渲染，这就是因为缺少 shouldComponentUpdate 方法导致的。这也同样意味着您不能定义某些基于组件挂载和卸载的行为。
更有趣的是您在函数式组件中既不能使用 this 关键字或访问到 ref 。对于习惯了严格意义上的类或面向对象风格的人来说，这很让他们惊讶。这也是使用函数最大的争论点。
另一个有趣的事实就是您仍然可以访问到 context ， 如果您将 context 定义为函数的一个 props 。
所以您可能会问自己，它的优势究竟体现在哪里。特别是您已经使用了 React 并倾向于使用基于类的方式。当我们拥抱这个概念的时候， 容器型组件 (container component) 和 展示型组件 (presentational component) 的概念就会变得非常清晰。您也可以阅读 Dan Abramov 关于此主题的 文章 以获取更深的了解。
通过将逻辑和数据处理与 UI 展示剥离开来，我们就可以避免在展示型组件中处理任何的状态。 无状态函数式组件强制实施了这样的风格 ，因为您无论如何都没有办法处理本地状态了。它强制您将任何的状态处理移交至上层的组件树，而让下层的组件只做它们所做的——关注 UI 的展示。
没有逻辑意味着相同的表示具有相同的数据。
在编写无状态函数式组件时，您需要避免某些特定的模式。避免在函数式组件中定义函数，这是因为每一次函数式组件被调用的时候，一个新的函数都会被创建。
这个问题很容易解决，您可以将这个函数作为 props 传递进去，或者将它定义在组件外面。
有时候谈起无状态函数式组件会提到 纯 (pure) 这个词。在这方面您应该避免使用 context 或 defaultProps，如果您需要定义上述任何一个或两个，您应该选择基于类的方式。
至于 defaultProps，一个变通的方案就是使用默认参数。
关于纯函数，请查看 Bernhard Gschwantner 的 评论 ，他总结得非常完美。
另一个常见陷阱就是简单地认为使用纯无状态函数式组件可以获得性能上的提升。这个观点是不正确的。 相反，当我们需要处理大量无状态函数型组件的时候，它的对立观点却是正确的。
性能问题是由于缺少生命周期方法导致的，这就意味着 React 没有访问任何额外的方法并且总是渲染组件。
缺少声明周期方法在另一方面也导致了没法定义 shouldComponentUpdate 方法。因此，我们不能够告诉 React 是重新渲染还是不渲染，这也就导致了永远都会重新渲染。接下来我们将会了解到缓解这种问题的方法。
如果您想了解更多高阶组件以及使用它们的优点，请查看 Why The Hipsters Recompose Everything 。
高阶组件是一种接收组件为参数并返回一个新的组件的函数。
这种方式可以让我们解决许多因使用无状态函数式组件而导致的问题。简言之，我们可以将函数式组件封装进高阶组件以解决状态处理和渲染优化这样的问题，高阶组件可以帮助我们关注本地状态处理以及 shouldComponentUpdate 函数的实现。
Recompose 就帮我们解决了以上提到的情况。
下面的这个例子是直接从这个项目 README 文件中拿来的。
正如上面所示，我们可以将精力集中于 UI 表示并在需要的时候将函数封装进一个纯函数并导出这个封装的函数。我们就不需要将原始的函数重构为一个类组件。
下面的示例来自于 Why The Hipsters Recompose Everything 。
withState 使得我们在有需要的时候管理本地组件状态，只需将我们的无状态函数式组件传递给 enhance 函数即可。
同样，recompose 已经实现了 withState ，所以就没有必要自己再去实现它了。
使用无状态函数式组件最大的好处就是它能够将容器型和展示型组件明确区分开来，避免产生大型以及杂乱的组件。没有 this 关键字也就意味着没有快捷方式在整个应用中随机地展开状态。
当一个开发团队中人员经验存在差别时，这些方面就会变得异常有用，它会帮助我们间接地执行内部开发的标准。