recat基礎知識目錄
* 1.html模板
添加引入react的鏈接
三個樣式有順序
1 react.development
2 react-dom.develop
3 babel.min
* 2.ReactDOM.render()
輸出
ReactDOM.render(
輸出內容的代碼體,
document.querySelector('綁定節點')
)
* 3.JSX 語法
<>代表html代碼塊 {}代表js代碼塊
html塊 {js塊}
* 4.組件 & props
通過繼承React.Component類來定義一個組件
class Person extends React.Component{}
組件內部由三部分構成 構造器： constructor 執行父類構造器: super 執行體：render
class Person extends React.Component{
constructor(){
super();
}
render(){
return(
JSX代碼塊
)
}
}
* 5.props & 純函數
props 組件傳來的參數
react組件必須是純函數(輸入相同的值返回的都是固定值的函數)
* 6.事件
綁定事件 綁定this bind 用於保持指向不變
* 7.列表渲染
通過父組件把數據傳遞給子組件的props
子組件內部直接獲取數據
遍歷通過map 和key綁定標識
渲染代碼塊
map((item,index)=>{
return (
)
})
* 8.條件渲染 相當於vue的v-if 和 v-show
if else if(A){a}else{b} 通過判斷A的布爾值決定執行a或b
&& a&&{b} 通過判斷A的布爾值決定要不要執行b
三目運算符 A?{a}:{b} 通過判斷A的布爾值來決定執行a或b
* 9.this.state
子組件內部定義數據
this.state{
show:false
}
修改子組件內部的數據 類似小程序裡修改data裡變量一樣
this.setState({
show:true
})
通過測試得知：子組件constructor裡的變量隨意定義
修改的時候只需this.set變量 變量首字母大寫就行
* 10.style和class
* 11.生命週期
* 12.表單
* 13.獲取真實的DOM節點
* 14.this.props.children
1.html模板
//>
// todo
2.ReactDOM.render()
作用: 編譯模板,把模板掛載到指定的節點上
<title>Document/<title>
ReactDOM.render(
hello world
,document.getElementById('root')
)
3.JSX 語法
說明: jsx語法html代碼和js代碼可以混寫而不需要加引號,可以這樣做的原因是React和到jsx代碼後會進行編譯,使代碼正確運行.當然jsx也是有它自己本身的規則:
1.js代碼需要用{}括起來
2.React編譯規則: 遇到
<title>Document/<title>
const person = {
name: 'huruqing',
age: 108
};
const element =
姓名: {person.name}
年齡: {person.age}歲
;
ReactDOM.render(
element,
document.getElementById('root')
);
4.組件
1.用es5定義一個react組件
<title>
// es5組件的寫法,一個函數就是一個組件
function Welcome(props) {
return (
姓名: {props.person.name}
年齡: {props.person.age}
)
}
const person = {
name: 'huruqing',
age: 108
}
ReactDOM.render(
<welcome>,
document.getElementById('root')
)
2.es6的class和class繼承
/**
* 面向對象中的繼承
* es6中的類和類的繼承
*/
// 定義一個類
class Person {
// 構造器(初始化類的實例)
constructor() {
// alert('哈哈哈哈');
this.mouth = '1張';
this.leg = '兩條';
}
eat() {
console.log('人類是個吃貨');
}
speak() {
console.log('會說人話');
}
}
var person = new Person();
console.log(person);
// 繼承
class Man extends Person {
constructor(name,age) {
// 執行父類構造器
super();
this.name = name;
this.age = age;
}
}
var man = new Man('張三',100);
console.log(man);
console.log(man.leg);
man.speak();
3.用es6定義個react組件
<title>
姓名:
年齡:
/**
* es6使用class的形式來創建組件,繼承React的Component類,
* 後面我們更多的使用這種方式來創建組件
*/
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
姓名: {this.props.person.name}
年齡: {this.props.person.age}
)
}
}
const person = {
name: 'huruqing',
age: 108
}
ReactDOM.render(
<welcome>,
document.getElementById('root')
)
5.props和純函數
1.相同的輸入有相同的輸出,輸入可以確定輸出,這就是純函數
2.對待props就像對待純函數一樣,遵循可以通過輸入確定輸出
<title>
// 這是個純函數,輸入什麼,得到什麼是一定的,同樣的輸入必定有同樣的輸出
const sum = (a, b) => {
return a + b;
}
sum(2,3); // 5
sum(2,3); // 5
// 這個函數是不純的,因為它修改了外部傳進來的參數
let count = 0;
const getResult = (num) => {
count++;
return num*num + count;
}
getResult(2); // 5
getResult(2); // 6
// 所有的react組件都必須遵守的一條規則:
// 對待props就像對待純函數一樣,遵循可以通過輸入確定輸出
6.綁定事件
1.事件綁定的函數的this的指向會改變,需要使用bind來綁定函數的指向
<title>
class Demo extends React.Component {
constructor(props) {
super(props);
// 讓函數的this指向class的實例
this.handleClick = this.handleClick.bind(this);
}
handleClick (){
this.getList();
}
getList() {
alert('獲取列表數據');
}
render() {
return (
<button>
click
);
}
}
ReactDOM.render(
<demo>,
document.getElementById('app')
)
2.事件傳參的方式
react可以在{} 裡面執行一個函數的調用
<title>
class Demo extends React.Component {
constructor(props) {
super(props);
this.toDetail = this.toDetail.bind(this);
}
toDetail(id) {
console.log(event);
alert(id);
}
render() {
return (
- <button> {this.toDetail(1001)}}>電影1/<button>
- <button> {this.toDetail(1002)}}>電影2/<button>
- <button> {this.toDetail(1003)}}>電影3/<button>
)
}
}
ReactDOM.render(
<demo>,
document.getElementById('root')
)
7.列表渲染
<title>
class List extends React.Component {
constructor(props) {
super(props);
}
render() {
let heroList = this.props.heroList;
return (
{hero.heroName} -- {hero.role}
{heroList.map(hero =>{
return (
)
}
)}
)
}
}
const heroList = [
{id: 1, heroName: '亞瑟', role: '戰士'},
{id: 2, heroName: '牛魔王', role: '戰士'},
{id: 3, heroName: '魯班七號', role: '射手'}
];
ReactDOM.render(
<list>,
document.getElementById('root')
);
8.條件渲染
1.通過 if 來控制渲染內容
<title>
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
// 使用if else判斷變量isLogin的值來決定顯示什麼內容
if (this.props.isLogin) {
return (
歡迎回來, <button>退出登錄/<button>
)
} else {
return (
你還沒登錄, <button>請登錄/<button>
)
}
}
}
ReactDOM.render(
<welcome>,/<welcome>
document.getElementById('app')
)
2.通過三目運算符來判斷
使用三目運算符判斷變量isLogin的值來決定顯示什麼內容
<title>三目運算符/<title>
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
/**
* 通過變量isLogin來決定顯示什麼內容
* 使用三目運算符(內容較短用三目運算符)
* 再長一點用上面if else的方式
* 更長的內容封裝成一個組件更合適
*/
return (
this.props.isLogin?
歡迎回來, <button>退出登錄/<button>
:
你還沒登錄, <button>請登錄/<button>
)
}
}
ReactDOM.render(
<welcome>,/<welcome>
document.getElementById('app')
)
3.通過與運算符 && 進行控制
相當於if沒有else的情況
<title>三目運算符/<title>
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
/**
* 如果值為true就顯示,為false不顯示,相當於vue的v-show
*/
return (
this.props.show &&
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram
的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。
)
}
}
ReactDOM.render(
<welcome>,/<welcome>
document.getElementById('app')
)
9.this.state和this.setState
<title>三目運算符/<title>
class Welcome extends React.Component {
constructor(props) {
super(props);
// state的初始值
this.state = {
show: true
}
this.toggleMsg = this.toggleMsg.bind(this);
}
toggleMsg(flag) {
// 修改state裡show的值
this.setState({
show: flag
})
}
render() {
return (
<button> {this.toggleMsg(true)}}>顯示/<button>
<button> {this.toggleMsg(false)}}>隱藏/<button>
{this.state.show &&
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC
框架，都不滿意，就決定自己寫一套，用來架設 Instagram
的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。
}
)
}
}
ReactDOM.render(
<welcome>,
document.getElementById('app')
)
10.樣式和屬性
1.class使用className代替
2.style需要用{{}},外面的{}代表這是js代碼,裡面的{}則是個js對象
3.屬性是個變量加上{}即可
<title>
<style>
.green {
color: green;
}
let bg = '#999';
let imgUrl = 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1598000148,3084276147&fm=58&s=36F6EC36C8A47E92227DC7C502007026';
ReactDOM.render(
hello react
我的react
document.getElementById('root')
)
11.生命週期
<title>
/**
* react的生命週期分成三種
* 1. mount 掛載
* 2. update 更新
* 3. unmount 卸載
*/
class Hello extends React.Component {
componentWillMount() {
console.log('即將掛載');
}
componentDidMount() {
console.log('已掛載');
}
componentWillUpdate(nextProps, nextState) {
console.log('將要更新');
}
componentDidUpdate(prevProps, prevState) {
console.log('更新完畢');
}
// 默認每一次的修改都觸發頁面更新,此函數用於干預是否要更新,用於性能優化,
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUnmount() {
console.log('將要卸載');
}
render() {
return
}
}
ReactDOM.render(
<hello>,
document.getElementById('root')
);
12.表單
1.單個input標籤輸入,讓輸入的數據與react數據流同步
<title>
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('你輸入的用戶名是: ' + this.state.value);
event.preventDefault();
}
render() {
return (
);
}
}
ReactDOM.render(
<nameform>,
document.getElementById('root')
)
2.多個input表單輸入
如果有多個input標籤輸入,我們是否需要為每一個input綁定一個事件呢,會不會太麻煩了,
其實不用,我們可以像下面這樣來處理
<title>
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
username: 'huruqing',
password: 123456,
msg: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
你輸入的用戶名是: {this.state.username}
你輸入的密碼是: {this.state.password}
);
}
}
ReactDOM.render(
<reservation>,
document.getElementById('root')
)
13.獲取真實的DOM節點
通過ref可以獲取真實dom節點,需要確保節點已經掛載
<title>
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.refs.myTextInput.focus();
}
render() {
return (
)
}
}
ReactDOM.render(
<mycomponent>,
document.getElementById('root')
);
14.this.props.children
this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點
<title>
class NotesList extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
- {child} ;
{
React.Children.map(this.props.children, function (child) {
return
})
}
);
}
}
ReactDOM.render(
<noteslist>
hello
world
,
document.body
);
閱讀更多 burninging 的文章
